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.

We are undergoing a migration, the following examples might not be up-to-date.

Please refer directly to the Storybook documentation based on your preferred framework.

Storybook documentations

Angular

React

Vanilla

Figma

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" max="100" 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>

Skeleton

Spinner