Create a slider by adding the class .slider and the attribute data-slider to a container element. You should also define both a starting and maximum value for the slider.

Inside the container are three elements:

• The handle (.slider-handle), which the user drags.
• The fill (.slider-fill), which resizes dynamically based on where the handle is.
• A hidden <input>, which is where the value of the slider is stored.

The data-initial-start="" value is where along the slider the handle starts. The data-end="" is the maximum value for the slider. In the below example, starting at 50 of 200 means the slider handle will start at 25% of the total.