How to build a custom input range slider

1. Introduction

Today we are going to build a customised input range slider. In HTML we have an input tag that has many types. One of those types is range. Now although it is a useful accessory, often we struggle to get it to match with the rest of our UI. So lets get started.

2. HTML

So for the layout of the slider lets have two buttons that add and subtract value from the range and obviously the slider itself in between.

Now add this to your HTML file.

<div class="range">
  <div class="rangeAction">-</div>
  <input type="range" class="slider" min="0" max="100" value="0">
  <div class="rangeAction">+</div>
</div>

In the HTML above, we have a parent div element that contains all the elements of the slider. Within that container we have two action containers with the plus and minus sign as their text content. And finally we also have the input tag with the following attributes:

1. type : Denotes the type of the input (In this case ,range)

2. min: Minimum value of the slider

3. max: Maximum value of the slider

4. value: Initial value of the slider

3. CSS

Now the most important and interesting part of this article, the CSS. Now let give a base style to the parent container.

.range{
  display:flex;
  justify-content:"center";
  align-items:"center";
  height:100px;
}

Now lets add styling to the action containers

.rangeAction{
  background-color:white;
  width:50px;
  height:50px;
  cursor:pointer;
  display:flex;
  justify-content:center;
  align-items:center;
  border-radius:50%;
  border:1px solid #c2c2c2
}

Now that the action containers are ready , let us move on to the slider. First we'll give the slider some base styles and then style the range indicator. So for the slider give it the following styles.

.slider {
  -webkit-appearance: none;
  width: 90%;
  margin-left:20px;
  margin-right:20px;
  height: 10px;
  border-radius:50px;
  background: #d3d3d3;
  margin-top:40px;
  outline: none;
  opacity: 0.7;
  -webkit-transition: .2s;
  transition: opacity .2s;
}

.slider:hover {
  opacity: 1;
}

Now to adjust the range indicator we will apply styles to it using the ::-webkit-slider-thumb selector added to our .slider class.

.slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 75px;
  height: 75px;
  background: white;
  border:10px solid blue;
  cursor: pointer;
}

Now that the styling is complete lets add the relevant functionality to the plus and minus buttons.

4. JavaScript

First we need select the buttons and the slider using DOM

let actionButtons=document.getElementsByClassName("rangeAction")
let minus=actionButtons[0]
let plus=actionButtons[1]
let slider=document.querySelector("[type=range]")

Now that all the required elements are selected lets add onclick events to the plus and minus buttons.

minus.onclick=function(e){
  slider.value=parseInt(slider.value)-5
}

plus.onclick=function(e){
    slider.value=parseInt(slider.value)+5
}

Here I have provided a value change of 5. You can change that according to you requirements.

Result

Now you should have an input range slider that looks like this.

Congratulations, you have now successfully learnt to create a custom range slider.