Slider

A slider allows the user to slide a knob along a straight track to control or to change a variable. Sliders can have icons on both ends of the bar, for example when you want to change the brightness of your screen.

To do

React

Vanilla

Figma

Last updated v5.0.0

Example

<form>
  <div class="nj-slider">
    <label for="formControlSlider">Slider label</label>
    <input min="0" type="range" value="2" max="10" step=".1" id="formControlSlider">
  </div>
</form>

Value display

You can add a tooltip with the input value on top of the slider with data-tooltip="true".

<form>
  <div class="row">
    <div class="col-md-4">
      <div class="nj-slider" data-tooltip="true">
        <label for="formControlSlider3">Slider label</label>
        <input min="15" type="range" value="25" id="formControlSlider3" >
      </div>
    </div>
    <div class="col-md-8">
      <div class="nj-slider" data-tooltip="true">
        <label for="formControlSlider4">Slider label</label>
        <input min="1" max="100" type="range" value="25" id="formControlSlider4">
      </div>
    </div>
  </div>
</form>

Disabled

You can disable the slider with the nj-slider--disabled class modifier.

<form>
  <div class="nj-slider nj-slider--disabled">
    <label for="formControlSlider2">Slider Disabled</label>
    <input min="1" max="100" type="range" value="25" id="formControlSlider2" disabled>
  </div>
</form>

Sidebar

Spinner