Slider
A form control which lets the user specify a numeric value between a given range. Common use cases include configuring settings such as audio volume, color configuration, game difficulty etc.
Default slider
Default slider
<input class="Slider" type="range">Specifying minimum and maximum values
By default, the minimum is 0 and the maximum is 100. You can specify different bounds using the min and/or max attributes.
<input class="Slider" type="range" min="0" max="10">Setting granularity
By default, the value granularity is 1. Change the step attribute to control the granularity. For example, If you need a value between 0 and 100, accurate to 10% increments, you should set step="10".
<input class="Slider" type="range" step="10">If you need more granular control, the step attribute also accepts decimals.
<input class="Slider" type="range" min="0" max="10" step=".5">If you want to accept any value regardless of how many decimal places it extends to, specify a value of any for the step attribute.
<input class="Slider" type="range" min="0" max="10" step="any">Disabled state
If a slider is currently unavailable for some reason, you can apply a disabled state using the is-disabled class and the disabled attribute.
<input class="Slider is-disabled" type="range" disabled>