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.
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>