HTML Input Range Slider Both Custom And Default

HTML input range slider is created in both versions custom and default. If you are trying to create a range slider, so you have come to the right place. Here you will get a free source code of a round slider and a custom HTML input range slider.

If you want to change the style of the range slider so you just need to change some CSS properties. Maybe your requirement is different such as a stylish range slider, round slider, rectangle slider, or range slider with an icon or image.

HTML

<!-- Default -->
<h2>Default Range Slider</h2>
<div class="default">
    <input type="range" min="15" max="100" value="100">
</div>
<br>

<!-- Custom -->
<h2>Custom Range Slider</h2>
<div class="rangeSlider">
    <input type="range" class="circleRange" min="15" max="100" value="100">
</div>

CSS

*{
    margin: 0;
    padding: 0;
    font-family: arial;
    box-sizing: border-box;
}
h2 {
    text-align: center;
    margin: 50px 0px 20px;
}

/*-- Default Range Slider CSS --*/
.default {
    width: 90%;
    height: 100px;
    border-radius: 100px;
    padding: 38px 60px;
    margin: 0px auto;
    box-shadow: 0px 0px 10px #c1c1c1;
}
.default input {
    width: 100%;
}

/*-- Custom Range Slider CSS --*/
.rangeSlider {
    width: 90%;
    height: 100px;
    border-radius: 100px;
    padding: 38px 60px;
    margin: 0px auto;
    box-shadow: 0px 0px 10px #c1c1c1;
}
.circleRange{
    width: 100%;
    -webkit-appearance: none;
    -moz-appearance: none;
    background: #9C27B0;
    outline: none;
    height: 3px;
}

.circleRange::-webkit-slider-thumb{
    -webkit-appearance: none;
    background: #3f51b5;
    cursor: pointer;
    width: 32px;
    height: 32px;
    border-radius: 50%;
}
.circleRange::-moz-slider-thumb{
    -moz-appearance: none;
    background: #3f51b5;
    cursor: pointer;
    width: 32px;
    height: 32px;
    border-radius: 50%;
}