Slider

Slider is a scrollable input used to select a value between two numbers.

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>