Range Sliders Custom Design Style With Cross Browser Support

Since IE10 was released, the style of scope entries has been greatly improved. You can now use CSS to generate a range entry that is compatible with the browser (slider). In this tutorial, we will take the basic level of input. All browser range inputs must have multiple styles applied to override their basic appearance. This gave us an invisible or styleless range inputs in all browsers. Now we can apply our custom styles.

The widget you click or drag along the track is called the thumb. It can be designed as a normal HTML element. Remember, although we repeat the code here, this is necessary because we can not separate this type of selector with a comma. The browser will delete the entire selector if it does not understand the part.
The line where the thumb moves is called the track. It also has the same style as normal HTML elements.

Notes on IE: Internet Explorer 10+ is slightly different from the scope entry. In IE, you can specify a completely different style for the upper (right) and lower (left of thumb) areas of the track. The other thing to keep in mind is that when a user interacts with a range, the focus effect can be applied to the track that changes the style.

Step (1) - Add HTML:

Step (2) - Add CSS:

CHROME

input[type=range]{
    -webkit-appearance: none;
}
input[type=range]::-webkit-slider-runnable-track {
    width: 350px;
    height: 6px;
    background: #dddddd;
    border: none;
    border-radius: 4px;
}
input[type=range]::-webkit-slider-thumb {
    -webkit-appearance: none;
    border: none;
    height: 18px;
    width: 18px;
    border-radius: 100%;
    background: #000000;
    margin-top: -5px;
}
input[type=range]:focus {
    outline: none;
}
input[type=range]:focus::-webkit-slider-runnable-track {
    background: #cccccc;
}

FIREFOX

input[type=range]{
    /* fix for FF unable to apply focus style bug  */
    border: 1px solid white; 

    /*required for proper track sizing in FF*/
    width: 350px;
}

input[type=range]::-moz-range-track {
    width: 350px;
    height: 6px;
    background: #dddddd;
    border: none;
    border-radius: 4px;
}

input[type=range]::-moz-range-thumb {
    border: none;
    height: 18px;
    width: 18px;
    border-radius: 100%;
    background: #000000;
}

/*hide the outline behind the border*/
input[type=range]:-moz-focusring{
    outline: 1px solid white;
    outline-offset: -1px;
}

input[type=range]:focus::-moz-range-track {
    background: #cccccc;
}

INTERNET EXPLORER 10+

input[type=range]::-ms-track {
    width: 350px;
    height: 6px;
    
    /*remove background color from the track, instead backgrond we'll use ms-fill-lower and ms-fill-upper */
    background: transparent;
    
    /*leave room for the larger thumb to overflow with a transparent border */
    border-color: transparent;
    border-width: 6px 0;

    /*remove default tick marks*/
    color: transparent;
}
input[type=range]::-ms-fill-lower {
    background: #888888;
    border-radius: 12px;
}
input[type=range]::-ms-fill-upper {
    background: #dddddd;
    border-radius: 12px;
}
input[type=range]::-ms-thumb {
    border: none;
    height: 18px;
    width: 18px;
    border-radius: 100%;
    background: #000000;
}
input[type=range]:focus::-ms-fill-lower {
    background: #888888;
}
input[type=range]:focus::-ms-fill-upper {
    background: #cccccc;
}

Step (3) - Add JS (Optional for make functional):

var slider = document.getElementById("customRangeSlider");
var output = document.getElementById("demo");
output.innerHTML = slider.value; // Display the default slider value

// Update the current slider value (each time you drag the slider handle)
slider.oninput = function() {
    output.innerHTML = this.value;
}