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.