Docs

Range Sliders

Range sliders are a form of input for entering a number whose exact value is not important. This type control uses the following default values if the corresponding attributes are not specified:

  • min: 0
  • max: 100
  • value: min + (max-min)/2, or min if max is less than min
  • step: 1

Base

Range sliders are simply input type="range" elements with a .joy-range-slider wrapper. The input element needs to have the class .joy-range-slider__range.

<div class="joy-range-slider">
  <input type="range" class="joy-range-slider__range" value="5" min="0" max="10">
</div>

Labels

Use labels to add descriptions or values to your range sliders. Labels are entirely optional, but they are especially helpful in displaying the minimum and maximum values of your range sliders.

This is a label
0 100 
<div class="joy-range-slider">
  <span class="joy-range-slider__label">This is a label</span>
  <input type="range" class="joy-range-slider__range">
</div>

<div class="joy-range-slider">
  <span class="joy-range-slider__label">0</span>
  <input type="range" class="joy-range-slider__range" value="25" min="0" max="100">
  <span class="joy-range-slider__label">100</span>
</div>

Colors

Range sliders come in a variety of colors.

<div class="joy-range-slider joy-range-slider--white">
  <input type="range" class="joy-range-slider__range" value="10" min="0" max="100">
</div>
<div class="joy-range-slider joy-range-slider--mint">
  <input type="range" class="joy-range-slider__range" value="20" min="0" max="100">
</div>
<div class="joy-range-slider joy-range-slider--pine ">
  <input type="range" class="joy-range-slider__range" value="30" min="0" max="100">
</div>
<div class="joy-range-slider joy-range-slider--sky ">
  <input type="range" class="joy-range-slider__range" value="40" min="0" max="100">
</div>
<div class="joy-range-slider joy-range-slider--bluebonnet">
  <input type="range" class="joy-range-slider__range" value="50" min="0" max="100">
</div>
<div class="joy-range-slider joy-range-slider--berry">
  <input type="range" class="joy-range-slider__range" value="60" min="0" max="100">
</div>
<div class="joy-range-slider joy-range-slider--plum">
  <input type="range" class="joy-range-slider__range" value="70" min="0" max="100">
</div>
<div class="joy-range-slider joy-range-slider--raspberry">
  <input type="range" class="joy-range-slider__range" value="80" min="0" max="100">
</div>

<div class="joy-range-slider joy-range-slider--dark">
  <input type="range" class="joy-range-slider__range" value="90" min="0" max="100">
</div>

<div style="padding: .25rem; background: #1c3a5e">
  <div class="joy-range-slider joy-range-slider--light-on-dark">
    <input type="range" class="joy-range-slider__range" value="50" min="0" max="100">
  </div>
</div>

Deprecation Warning

If you were using the old slider names with the old color (joy-range-slider--red, joy-range-slider--blue, etc), these will continue to work until the release of v1.0.0, at which point they will be removed. Please update to the new names as soon as possible.