Custom Range Slider With CSS

In web design, a range slider is an input element that allows the user to easily select a value from a set of values. We usually see range sliders used in volume controls, brightness adjustments, and even form fields. But the default browser sliders look very simple, which does not match our design.

That is why we need a Custom Range Slider. With CSS, we can easily change the look of the range slider. So today, we will create a custom range slider using very little code.

It should be noted that this range slider will only work in Chrome and Safari type browsers. You will have to write a different style for other browsers.

HTML:

For the HTML code, we don’t need anything much but just an input element with the type ‘range’.

<input type="range"/>

Stylesheet (CSS):

Centering the Slider:

We brought the whole body to the center with the Flexbox method so that the range slider is always in the middle of the screen. Using MIN HEIGHT 100VH will take the height of the entire viewport. And with the hidden overflow, no additional part can be seen on the screen. Additionally, a dark gray color has been used in the background, making the slider design more noticeable.

body{
    display: flex;
    justify-content: center;
    align-items: center;
    background: #525252;
    min-height: 100vh;
    overflow: hidden;
}

Styling the Slider:

We select the range slider by using the attribute selector. Before we style the range slider, we need to hide its default appearance by setting the ‘appearance’ attribute to none. Do note here that ‘appearance’ property is only available as Webkit and Moz; therefore, it should be tested carefully to check the browser compatibility. With the default look hidden, we set the dimensions for our slider as 500px * 50px.

500px indicates the slider takes up the 50px width of browser window size. If you observe, you can see a blue outline that appears whenever you click the slider or try moving the slider thumb. To get rid of this blue outline, set the ‘outline’ attribute to none.

input[type="range"] {
  margin: auto;
  -webkit-appearance: none;
  overflow: hidden;
  width: 500px;
  height: 50px;
  cursor: pointer;
  border-radius: 0;
}

Styling the Slider Thumb:

This code is actually used to completely redesign the slider button. Browsers usually provide a default design, but here, instead of that, a white rectangular button has been created, which has a light gray border around it.

The most interesting thing is that an effect has been created using box shadow, which makes it look like the slider is filled with color on both sides. The button moves forward and backward, it looks like the value inside the slider is changing.

::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 20px;
  height: 50px;
  background: #fff;
  box-shadow: -300px 0 0 300px #4b92b9,
  300px 0 0 300px aliceblue;
  border: 2px solid #999;
}

Are you interested in CSS art? We have drawn pictures of the elephant, fox etc. using only CSS properties. These tutorials will entertain you.

I hope you guys enjoyed this tutorial. If you have any suggestions and feedback to let me know through the comments below. Also, to stay updated with the latest tutorial, subscribe to me on Youtube.