Range
Range sliders let people pick a value from a continuous scale. Pair them with live outputs, scale labels and tick marks so the selected value is always clear.
1Basic range
A labelled slider from 0 to 100.
<label for="rng-basic-142" class="form-label">Satisfaction</label>
<input type="range" class="form-range" id="rng-basic-142">2Live value output
data-demo-range-output writes the current value into the badge while dragging.
%
<div class="d-flex justify-content-between align-items-center mb-1">
<label for="rng-out-143" class="form-label mb-0">Discount</label>
<span class="badge text-bg-primary"><output id="rng-out-value-144" for="rng-out-143">20</output>%</span>
</div>
<input type="range" class="form-range" id="rng-out-143" min="0" max="100" value="20" data-demo-range-output="#rng-out-value-144">3Min, max and step
Steps of 0.5 between 0 and 5 suit ratings and review scores.
<label for="rng-rating-145" class="form-label">Minimum rating: <strong><output id="rng-rating-out-146">4</output> stars</strong></label>
<input type="range" class="form-range" id="rng-rating-145" min="0" max="5" step="0.5" value="4" data-demo-range-output="#rng-rating-out-146">4Disabled range
A disabled slider cannot be moved and is dimmed.
<label for="rng-disabled-147" class="form-label">Storage limit (set by your administrator)</label>
<input type="range" class="form-range" id="rng-disabled-147" value="60" disabled>5Price filter
Min and max labels under the slider show the limits of the scale.
$0$500
<label for="rng-price-148" class="form-label fw-semibold">Max price: $<output id="rng-price-out-149">250</output></label>
<input type="range" class="form-range" id="rng-price-148" min="0" max="500" step="10" value="250" data-demo-range-output="#rng-price-out-149">
<div class="d-flex justify-content-between small text-body-secondary">
<span>$0</span><span>$500</span>
</div>6Volume with icons
Icons at both ends make the direction of the scale obvious.
<div class="d-flex align-items-center gap-2">
<span class="text-body-secondary"><i class="bi bi-volume-off" aria-hidden="true"></i></span>
<label for="rng-volume-150" class="visually-hidden">Volume</label>
<input type="range" class="form-range" id="rng-volume-150" value="41"> <span class="text-body-secondary"><i class="bi bi-volume-up" aria-hidden="true"></i></span>
</div>7Tick marks
A datalist gives the slider tick marks; labels below name the stops.
XSSMLXL
<label for="rng-ticks-151" class="form-label">Text size</label>
<input type="range" class="form-range" id="rng-ticks-151" min="0" max="4" step="1" value="2" list="rng-ticks-list-152">
<datalist id="rng-ticks-list-152">
<option value="0"></option>
<option value="1"></option>
<option value="2"></option>
<option value="3"></option>
<option value="4"></option>
</datalist>
<div class="d-flex justify-content-between small text-body-secondary">
<span>XS</span><span>S</span><span>M</span><span>L</span><span>XL</span>
</div>8Budget from / to
Two sliders select the lower and upper end of a range.
<fieldset class="border rounded-3 p-3">
<legend class="float-none w-auto fs-6 fw-semibold px-1 mb-0">Project budget</legend>
<label for="rng-from-153" class="form-label small mb-0">From $<output id="rng-from-out-154">2000</output></label>
<input type="range" class="form-range" id="rng-from-153" min="500" max="20000" step="500" value="2000" data-demo-range-output="#rng-from-out-154">
<label for="rng-to-155" class="form-label small mb-0">To $<output id="rng-to-out-156">12000</output></label>
<input type="range" class="form-range" id="rng-to-155" min="500" max="20000" step="500" value="12000" data-demo-range-output="#rng-to-out-156">
</fieldset>9Big value card
A large number above the slider makes the chosen amount the hero of the card.
$
Estimated reach: 39.9k people per month
<div class="card text-center">
<div class="card-body">
<label for="rng-monthly-157" class="form-label text-body-secondary small text-uppercase">Monthly ad budget</label>
<div class="display-6 fw-bold mb-2">
$<output id="rng-monthly-out-158">350</output>
</div>
<input type="range" class="form-range" id="rng-monthly-157" min="100" max="5000" step="50" value="350" data-demo-range-output="#rng-monthly-out-158">
<p class="small text-body-secondary mb-0">Estimated reach: 39.9k people per month</p>
</div>
</div>10Slider with number field
A slider for quick changes next to a number input for exact values.
<label for="rng-width-159" class="form-label">Image width (px)</label>
<div class="row g-2 align-items-center">
<div class="col">
<input type="range" class="form-range" id="rng-width-159" min="100" max="2000" step="10" value="1200" aria-label="Image width slider">
</div>
<div class="col-auto">
<label for="rng-width-num-160" class="visually-hidden">Image width in pixels</label>
<input type="number" class="form-control form-control-sm" id="rng-width-num-160" min="100" max="2000" value="1200" style="width: 6rem;">
</div>
</div>11Coloured ranges
accent-color style classes tint the thumb for different meanings.
<label for="rng-green-161" class="form-label small">Healthy threshold</label>
<input type="range" class="form-range tl-range-success" id="rng-green-161" value="70">
<label for="rng-amber-162" class="form-label small">Warning threshold</label>
<input type="range" class="form-range tl-range-warning" id="rng-amber-162" value="85">
<label for="rng-red-163" class="form-label small">Critical threshold</label>
<input type="range" class="form-range tl-range-danger" id="rng-red-163" value="95">12Photo editor adjustments
A stack of labelled sliders with outputs for an image editing panel.
Adjust photo
<div class="card">
<div class="card-header fw-semibold">
<i class="bi bi-image" aria-hidden="true"></i> Adjust photo
</div>
<div class="card-body">
<div class="row align-items-center g-2 mb-2">
<label for="rng-edit-164" class="col-4 col-form-label col-form-label-sm">Brightness</label>
<div class="col">
<input type="range" class="form-range" id="rng-edit-164" value="52" data-demo-range-output="#rng-edit-out-165">
</div>
<div class="col-2 text-end small">
<output id="rng-edit-out-165">52</output>
</div>
</div>
<div class="row align-items-center g-2 mb-2">
<label for="rng-edit-166" class="col-4 col-form-label col-form-label-sm">Contrast</label>
<div class="col">
<input type="range" class="form-range" id="rng-edit-166" value="42" data-demo-range-output="#rng-edit-out-167">
</div>
<div class="col-2 text-end small">
<output id="rng-edit-out-167">42</output>
</div>
</div>
<div class="row align-items-center g-2 mb-2">
<label for="rng-edit-168" class="col-4 col-form-label col-form-label-sm">Saturation</label>
<div class="col">
<input type="range" class="form-range" id="rng-edit-168" value="57" data-demo-range-output="#rng-edit-out-169">
</div>
<div class="col-2 text-end small">
<output id="rng-edit-out-169">57</output>
</div>
</div>
<div class="row align-items-center g-2 mb-2">
<label for="rng-edit-170" class="col-4 col-form-label col-form-label-sm">Warmth</label>
<div class="col">
<input type="range" class="form-range" id="rng-edit-170" value="54" data-demo-range-output="#rng-edit-out-171">
</div>
<div class="col-2 text-end small">
<output id="rng-edit-out-171">54</output>
</div>
</div>
</div>
</div>13Loan calculator
Amount and term sliders with a summary - a common finance widget.
Estimated monthly payment
$459.54
at 3.5% APR
<div class="row g-4">
<div class="col-md-7">
<label for="rng-loan-172" class="form-label">Amount: $<output id="rng-loan-out-173">15000</output></label>
<input type="range" class="form-range" id="rng-loan-172" min="1000" max="50000" step="1000" value="15000" data-demo-range-output="#rng-loan-out-173">
<label for="rng-term-174" class="form-label mt-2">Term: <output id="rng-term-out-175">36</output> months</label>
<input type="range" class="form-range" id="rng-term-174" min="6" max="72" step="6" value="36" data-demo-range-output="#rng-term-out-175">
</div>
<div class="col-md-5">
<div class="p-3 rounded-3 bg-body-tertiary h-100">
<div class="small text-body-secondary">
Estimated monthly payment
</div>
<div class="fs-3 fw-bold">
$459.54
</div>
<div class="small text-body-secondary">
at 3.5% APR
</div>
</div>
</div>
</div>14Percentage scale
Labels at 0, 25, 50, 75 and 100 per cent help people aim for a value.
0%25%50%75%100%
<label for="rng-percent-176" class="form-label">Project progress</label>
<input type="range" class="form-range" id="rng-percent-176" min="0" max="100" step="25" value="50">
<div class="d-flex justify-content-between small text-body-secondary">
<span>0%</span><span>25%</span><span>50%</span><span>75%</span><span>100%</span>
</div>15Thermostat
A large heading output and helper icons for a smart home control.
Living room
°C
15°28°
<div class="p-4 rounded-4 border text-center" style="max-width: 20rem;">
<div class="text-body-secondary small">
<i class="bi bi-house" aria-hidden="true"></i> Living room
</div>
<div class="display-5 fw-semibold my-2">
<output id="rng-temp-out-178">21</output>°C
</div>
<label for="rng-temp-177" class="visually-hidden">Target temperature</label>
<input type="range" class="form-range" id="rng-temp-177" min="15" max="28" value="21" data-demo-range-output="#rng-temp-out-178">
<div class="d-flex justify-content-between small">
<span class="text-info"><i class="bi bi-snow" aria-hidden="true"></i> 15°</span><span class="text-danger">28° <i class="bi bi-fire" aria-hidden="true"></i></span>
</div>
</div>16Labelled scale
Text labels at either end describe what low and high values mean.
Not likelyVery likely
<label for="rng-scale-179" class="form-label fw-semibold">How likely are you to recommend Quillium?</label>
<input type="range" class="form-range" id="rng-scale-179" min="0" max="10" value="8">
<div class="d-flex justify-content-between small text-body-secondary">
<span>Not likely</span><span>Very likely</span>
</div>17Team size pricing
A slider for seats with a price preview, typical on pricing pages.
$15 per seat / month
<div class="border rounded-3 p-3">
<div class="d-flex justify-content-between">
<label for="rng-team-180" class="form-label fw-semibold"><output id="rng-team-out-181">10</output> team members</label>
<span class="text-body-secondary small">$15 per seat / month</span>
</div>
<input type="range" class="form-range" id="rng-team-180" min="1" max="100" value="10" data-demo-range-output="#rng-team-out-181">
<button type="button" class="btn btn-primary btn-sm mt-2">Start free trial</button>
</div>18Range on dark
In a dark themed section the track and thumb adapt automatically.
<div class="p-3 rounded-3 bg-dark text-white" data-ui-theme="dark">
<label for="rng-dark-182" class="form-label">Playback speed: <output id="rng-dark-out-183">1</output>x</label>
<input type="range" class="form-range" id="rng-dark-182" min="0.5" max="2" step="0.25" value="1" data-demo-range-output="#rng-dark-out-183">
</div>19Mixer table
Compact sliders inside table rows, one per channel.
| Channel | Level | dB |
|---|---|---|
<div class="table-responsive">
<table class="table table-sm align-middle mb-0">
<thead>
<tr>
<th scope="col">Channel</th>
<th scope="col">Level</th>
<th scope="col" class="text-end">dB</th>
</tr>
</thead>
<tbody>
<tr>
<td><label for="rng-mix-184" class="small">Vocals</label></td>
<td style="min-width: 8rem;"><input type="range" class="form-range" id="rng-mix-184" min="-24" max="6" value="-4" data-demo-range-output="#rng-mix-out-185"></td>
<td class="text-end small"><output id="rng-mix-out-185">-4</output></td>
</tr>
<tr>
<td><label for="rng-mix-186" class="small">Guitar</label></td>
<td style="min-width: 8rem;"><input type="range" class="form-range" id="rng-mix-186" min="-24" max="6" value="-6" data-demo-range-output="#rng-mix-out-187"></td>
<td class="text-end small"><output id="rng-mix-out-187">-6</output></td>
</tr>
<tr>
<td><label for="rng-mix-188" class="small">Bass</label></td>
<td style="min-width: 8rem;"><input type="range" class="form-range" id="rng-mix-188" min="-24" max="6" value="-12" data-demo-range-output="#rng-mix-out-189"></td>
<td class="text-end small"><output id="rng-mix-out-189">-12</output></td>
</tr>
<tr>
<td><label for="rng-mix-190" class="small">Drums</label></td>
<td style="min-width: 8rem;"><input type="range" class="form-range" id="rng-mix-190" min="-24" max="6" value="-3" data-demo-range-output="#rng-mix-out-191"></td>
<td class="text-end small"><output id="rng-mix-out-191">-3</output></td>
</tr>
</tbody>
</table>
</div>20Range with help text
aria-describedby connects the slider with an explanation of its effect.
Conversations without replies are archived after 1 to 12 months. Archived items stay searchable.
<label for="rng-hours-192" class="form-label">Auto-archive after</label>
<input type="range" class="form-range" id="rng-hours-192" min="1" max="12" value="6" aria-describedby="rng-hours-help-193">
<div id="rng-hours-help-193" class="form-text">
Conversations without replies are archived after 1 to 12 months. Archived items stay searchable.
</div>