Sliders allow users to view and select a value (or range) from the range along a bar. They’re ideal for adjusting settings such as volume and brightness, or for applying image filters.
Sliders can use icons on both ends of the bar to represent a numeric or relative scale. The range of values or the nature of the values, such as volume change, can be communicated with icons.
Demo
Continuous sliders
Continuous sliders allow users to set and select a value along a subjective range.
Only continuous sliders are available with standard browser features. Design will change from one browser to another, and will look best in Firefox as webkit browsers (Chrome, Edge chromium) have poor input="range"
customization.
Value label and Range values cannot be obtained using basic browser styling. You will need ion.RangeSlider plugin.
States
Discrete sliders
Discrete sliders Tick marcks cannot be obtained using basic browser styling. You will need ion.RangeSlider plugin.