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

1. 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.
2. Simulate a slider control. For example, use the div element to simulate the style of range input, and use events such as mousedown, mousemove, and mouseup 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

<div class="container">
   <input type="range" min="0" max="1000" value="500">
 </div>

.container{
  width:300px;
  margin:2em;
}
 
input[type=range] {
  -webkit-appearance: none;
  width: 100%;
  position:relative;
}
 
input[type=range]::before {
  content:"|";
  position:absolute;
  top:0%;
  right:50%;
  height:1em;
  line-height:1em;
  transform:translateX(50%);
  color:#8c8c8c;
}
 
input[type=range]:focus {
  outline: none;
}
 
input[type=range]:hover::-webkit-slider-thumb {
  height: 3em;
  width: 3em;
  margin-top: -1em;
  transition:all .2s;
}
 
input[type=range]::-webkit-slider-runnable-track {
  width: 100%;
  height: 1em;
  cursor: pointer;
  box-shadow: 0px 0px 0px #000000, 0px 0px 0px #0d0d0d;
  background: #d9d9d9;
  border-radius: 1em;
  border: 0px solid #000000;
}
 
input[type=range]::-webkit-slider-thumb {
  box-shadow: 0px 0px 0px #000000, 0px 0px 0px #0d0d0d;
  border: 0px solid #000000;
  height: 2em;
  width: 2em;
  border-radius: 50%;
  background: #8c8c8c;
  cursor: pointer;
  -webkit-appearance: none;
  margin-top: -0.5em;
 
}

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

• Styling Cross-Browser Compatible Range Inputs with CSS
• Multi-Thumb Sliders: Particular Two-Thumb Case