Bootstrap 5 Tutorial

Bootstrap 5 Range

Last modified on: October 27, 2024

<div class="flex-shrink-0 flex flex-col relative items-end">
<div>
<div class="pt-0">
<div class="gizmo-bot-avatar flex h-8 w-8 items-center justify-center overflow-hidden rounded-full">&nbsp;</div>
</div>
</div>
</div>
<div class="group/conversation-turn relative flex w-full min-w-0 flex-col agent-turn">
<div class="flex-col gap-1 md:gap-3">
<div class="flex max-w-full flex-col flex-grow">
<div class="min-h-8 text-message flex w-full flex-col items-end gap-2 whitespace-normal break-words [.text-message+&amp;]:mt-5" dir="auto" data-message-author-role="assistant" data-message-id="e000018b-e158-4e84-9139-b34f77b623a4" data-message-model-slug="gpt-4o">
<div class="flex w-full flex-col gap-1 empty:hidden first:pt-[3px]">
<div class="markdown prose w-full break-words dark:prose-invert light">
<h3>Bootstrap 5: Range Input</h3>
<p>Bootstrap 5 offers a styled, responsive range input slider that is useful for forms where users need to select a numeric value within a range. The <code>.form-range</code> class is used to create a simple and sleek range slider that integrates seamlessly with other Bootstrap components.</p>
<hr />
<h3>Basic Range Slider</h3>
<p>The <code>.form-range</code> class applies default Bootstrap styling to the range input.</p>
<div class="contain-inline-size rounded-md border-[0.5px] border-token-border-medium relative bg-token-sidebar-surface-primary dark:bg-gray-950">
<div class="flex items-center text-token-text-secondary px-4 py-2 text-xs font-sans justify-between rounded-t-md h-9 bg-token-sidebar-surface-primary dark:bg-token-main-surface-secondary">html</div>
<div class="sticky top-9 md:top-[5.75rem]">
<div class="absolute bottom-0 right-2 flex h-9 items-center">
<div class="flex items-center rounded bg-token-sidebar-surface-primary px-2 font-sans text-xs text-token-text-secondary dark:bg-token-main-surface-secondary">
<pre class="language-markup"><code>&lt;div class="mb-3"&gt;
    &lt;label for="customRange1" class="form-label"&gt;Example Range&lt;/label&gt;
    &lt;input type="range" class="form-range" id="customRange1"&gt;
&lt;/div&gt;
</code></pre>
</div>
</div>
</div>
</div>
<hr />
<h3>Customizing Range Step and Value</h3>
<p>You can customize the range by setting the <code>min</code>, <code>max</code>, and <code>step</code> attributes. These attributes allow you to control the range of the slider and the incremental steps users can select.</p>
<div class="contain-inline-size rounded-md border-[0.5px] border-token-border-medium relative bg-token-sidebar-surface-primary dark:bg-gray-950">
<div class="flex items-center text-token-text-secondary px-4 py-2 text-xs font-sans justify-between rounded-t-md h-9 bg-token-sidebar-surface-primary dark:bg-token-main-surface-secondary">html</div>
<div class="sticky top-9 md:top-[5.75rem]">
<div class="absolute bottom-0 right-2 flex h-9 items-center">
<div class="flex items-center rounded bg-token-sidebar-surface-primary px-2 font-sans text-xs text-token-text-secondary dark:bg-token-main-surface-secondary">
<pre class="language-markup"><code>&lt;div class="mb-3"&gt;
    &lt;label for="customRange2" class="form-label"&gt;Range with Steps&lt;/label&gt;
    &lt;input type="range" class="form-range" min="0" max="100" step="10" id="customRange2"&gt;
&lt;/div&gt;
</code></pre>
</div>
</div>
</div>
</div>
<hr />
<h3>Disabled Range Slider</h3>
<p>Disable the range slider by adding the <code>disabled</code> attribute.</p>
<div class="contain-inline-size rounded-md border-[0.5px] border-token-border-medium relative bg-token-sidebar-surface-primary dark:bg-gray-950">
<div class="flex items-center text-token-text-secondary px-4 py-2 text-xs font-sans justify-between rounded-t-md h-9 bg-token-sidebar-surface-primary dark:bg-token-main-surface-secondary">html</div>
<div class="sticky top-9 md:top-[5.75rem]">
<div class="absolute bottom-0 right-2 flex h-9 items-center">
<div class="flex items-center rounded bg-token-sidebar-surface-primary px-2 font-sans text-xs text-token-text-secondary dark:bg-token-main-surface-secondary">
<pre class="language-markup"><code>&lt;div class="mb-3"&gt;
    &lt;label for="customRange3" class="form-label"&gt;Disabled Range&lt;/label&gt;
    &lt;input type="range" class="form-range" id="customRange3" disabled&gt;
&lt;/div&gt;
</code></pre>
</div>
</div>
</div>
</div>
<hr />
<h3>Styling Range Slider with Custom CSS</h3>
<p>While Bootstrap provides a clean default style, you can add custom CSS to further style the range slider. For example, adjusting the color of the slider thumb or track can help it fit seamlessly into your design.</p>
<div class="contain-inline-size rounded-md border-[0.5px] border-token-border-medium relative bg-token-sidebar-surface-primary dark:bg-gray-950">
<div class="flex items-center text-token-text-secondary px-4 py-2 text-xs font-sans justify-between rounded-t-md h-9 bg-token-sidebar-surface-primary dark:bg-token-main-surface-secondary">html</div>
<div class="sticky top-9 md:top-[5.75rem]">
<div class="absolute bottom-0 right-2 flex h-9 items-center">
<div class="flex items-center rounded bg-token-sidebar-surface-primary px-2 font-sans text-xs text-token-text-secondary dark:bg-token-main-surface-secondary">
<pre class="language-markup"><code>&lt;style&gt;
    .custom-range {
        accent-color: #0d6efd; /* Primary color for Bootstrap */
    }
&lt;/style&gt;

&lt;div class="mb-3"&gt;
    &lt;label for="customRangeStyled" class="form-label"&gt;Custom Styled Range&lt;/label&gt;
    &lt;input type="range" class="form-range custom-range" id="customRangeStyled"&gt;
&lt;/div&gt;
</code></pre>
</div>
</div>
</div>
</div>
<hr />
<h3>Example: Dynamic Range Value Display</h3>
<p>Use JavaScript to display the current value of the slider dynamically.</p>
<div class="contain-inline-size rounded-md border-[0.5px] border-token-border-medium relative bg-token-sidebar-surface-primary dark:bg-gray-950">
<div class="flex items-center text-token-text-secondary px-4 py-2 text-xs font-sans justify-between rounded-t-md h-9 bg-token-sidebar-surface-primary dark:bg-token-main-surface-secondary">html</div>
<div class="sticky top-9 md:top-[5.75rem]">
<div class="absolute bottom-0 right-2 flex h-9 items-center">
<div class="flex items-center rounded bg-token-sidebar-surface-primary px-2 font-sans text-xs text-token-text-secondary dark:bg-token-main-surface-secondary">
<pre class="language-markup"><code>&lt;div class="mb-3"&gt;
    &lt;label for="dynamicRange" class="form-label"&gt;Dynamic Range Value: &lt;span id="rangeValue"&gt;50&lt;/span&gt;&lt;/label&gt;
    &lt;input type="range" class="form-range" min="0" max="100" value="50" id="dynamicRange" oninput="document.getElementById('rangeValue').textContent = this.value"&gt;
&lt;/div&gt;
</code></pre>
</div>
</div>
</div>
</div>
<hr />
<h3>&nbsp;</h3>
</div>
</div>
</div>
</div>
</div>
</div>

Web Technology View More