Slider

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

Example

Use only the tag <nj-slider></nj-slider> if you choose the Web Component initialization method with Angular, React or VueJs frameworks.

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