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.

React

Angular coming soon

Example

<form>
  <div class="row">
    <div class="col-4">    
      <div class="nj-slider">
        <label for="formControlSlider">Slider label</label>
        <input min="15" type="range" value="25" id="formControlSlider">
      </div>   
    </div>
    <div class="col-8">
      <div class="nj-slider">
        <label for="formControlSlider2">Slider label</label>
        <input min="1" max="100" type="range" value="25" id="formControlSlider2">
      </div>
    </div>
  </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-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-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>

Sidebar

Spinner