Customized Range Slider
Question
The native HTML5 control range input has different styles for each browser. In order to achieve a unified style effect, we usually have two solutions to consider, directly modify the CSS style, or simulate a slider control.
Solution
- Modify the css style directly. Use
-webkit-slider-thumb
to modify the style of the slider, use-webkit-slider-runnable-track
to modify the style of the track, and then combine events such as:focus
and:hover
to add special effects to make the slider More vivid. - Simulate a slider control. For example, use the
div
element to simulate the style of range input, and use events such asmousedown
,mousemove
, andmouseup
to simulate the behavior of input
Our blog post briefly introduces how to control the style of input range only through css.
Make a simple demonstration
Or click our Online Demo
Compatibility
We have demonstrated the slider style under webkit
here. If you want to support more browsers, you need to set different pseudo-classes.
::-webkit-slider-thumb
set slider for webkit/blink::-moz-range-thumb
set the slider for Firefox::-ms-thumb
Set slider for IE
There is also the setting of the background bar
::-webkit-slider-runnable-track
set background bar for webkit/blink::-moz-range-track
set the background bar for Firefox::-ms-track
/::-ms-fill-lower
/::-ms-fill-upper
set background bar for IE
Tip
We placed a vertical line in the middle of the slider to indicate the middle position. In addition to using the key shift+\
to type out the vertical line symbol, there are some of the following vertical line symbols that can be used.
丨 | │ | ᅵ | ▎ | ▍ | ▌ |
▋ | ▊ | ▉ | ǀ | ǁ | ׀ |
ا | ། | ༎ | ᅵ | ‖ | ∣ |
∥ | ⑊ | │ | ┃ | ║ | ╵ |
╷ | ╹ | ╻ | ▅ | ▆ | ▇ |
█ | ▐ | ▕ | ◫ | ▥ | ▯ |
▮ | ❘ | ❙ | ❚ | 〡 | 〢 |
| | ﺍ | ︳ | ︲ | ︱ | ﺍ |
〣 | ㅣ | ㆐ | 丨 |
Reference
For more detailed interpretation, please refer to the following blog post
Comments