Example
Show code
<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"
.
Show code
<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" 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.
Show code
<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>