How to make a slider in HTML and CSS

Build a website slider with HTML & CSS: learn how to create a responsive slider with an example.

Creating a Slider in HTML and CSS

Creating a slider in HTML and CSS is a great way to create a visually appealing and interactive user interface for your website. Sliders allow users to select a value or range of values using a draggable handle, and can be used in a variety of applications, from selecting a desired item from a list, to choosing an age range or selecting a price range. In this tutorial, we’ll show you how to create a simple slider using HTML and CSS.

Step One: Writing the HTML

The first step in creating your slider is to write the HTML. In our example, we’ll create a simple slider with a range of 0 to 10. To do this, we’ll add a <input> element with an type attribute set to range. This will create our slider. We’ll also add min and max attributes to define the range of the slider. We’ll also add a value attribute to set the default value of the slider:

<input type="range" min="0" max="10" value="5">

Step Two: Writing the CSS

The next step is to write the CSS to style our slider. To do this, we’ll need to create a few classes, as well as some basic styles. First, we’ll create a class called .slider that will be used to style all of our sliders. We’ll also create a class called .handle that will be used to style the handle of the slider. Finally, we’ll create a class called .track that will be used to style the track of the slider.

.slider {
  position: relative;
  width: 100%;
}

.handle {
  position: absolute;
  top: 0;
  left: 0;
  width: 20px;
  height: 20px;
  background-color: #ff0000;
  border-radius: 50%;
  cursor: pointer;
}

.track {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 2px;
  background-color: #000;
  border-radius: 5px;
}

We’ve now created the basic styles for our slider. Now, we need to add some JavaScript to make it functional.

Step Three: Writing the JavaScript

The final step is to write the JavaScript to make our slider functional. To do this, we’ll need to add an event listener to our slider <input> element that listens for the input event. This will allow us to track the user’s interaction with the slider. We’ll also need to add a function that will update the position of the handle of the slider when the user interacts with it. Finally, we’ll need to add a function that will update the value of the slider when the user releases the handle.

// Add event listener to the slider
let slider = document.querySelector('input[type="range"]');
slider.addEventListener('input', handleSliderChange);

// Function to update the position of the handle
function handleSliderChange(event) {
  let handle = document.querySelector('.handle');
  let track = document.querySelector('.track');
  
  // Calculate the position of the handle
  let percent = (event.target.value - event.target.min) / (event.target.max - event.target.min);
  let position = percent * track.offsetWidth;
  
  // Move the handle
  handle.style.left = position + 'px';
}

// Function to update the value of the slider
function handleSliderRelease(event) {
  let value = event.target.value;
  // Update the value of the slider
  // ...
}

We’ve now finished our simple slider! With a few lines of HTML, CSS, and JavaScript, we’ve created a fully functional slider that allows users to select a value from 0 to 10. Sliders are a great way to create a visually appealing and interactive user interface for your website, and with a few simple steps, you can create one for yourself.