Custom Range Slider Using HTML,CSS and JavaScript
Welcome to the Codewithrandom blog. In this blog, We learn how to create a Custom Range Slider. We use HTML, CSS, and JavaScript for this Custom Range Slider.
I hope you enjoy our blog so let’s start with a basic html structure for a custom range slider.
HTML Code For Custom Range Slider
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>thara bhai Joginder cringe Slider</title> </head> <body> <h2>Joginder cringe Slider</h2> <div class="range-container"> <input type="range" id="range" min="0" max="100"> <label for="range">10</label> </div> </body> </html>
There is all html code for the custom range slider. Now, you can see output without Css and JavaScript. then we write Css for styling Range Slider and use javascript for creating a custom range slider.
Ecommerce Website Using HTML, CSS, & JavaScript (Source Code)
output
CSS Code For Custom Range Slider
@import url('https://fonts.googleapis.com/css?family=Lato&display=swap');
* {
box-sizing: border-box;
}
body {
background-image: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
font-family: 'Lato', sans-serif;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
height: 100vh;
overflow: hidden;
margin: 0;
}
h2 {
position: absolute;
top: 10px;
}
.range-container {
position: relative;
}
input[type='range'] {
width: 300px;
margin: 18px 0;
-webkit-appearance: none;
}
input[type='range']:focus {
outline: none;
}
input[type='range'] + label {
background-color: #fff;
position: absolute;
top: -25px;
left: 110px;
width: 80px;
padding: 5px 0;
text-align: center;
border-radius: 4px;
box-shadow: 0 0 5px rgba(0, 0, 0, 0.3);
}
/* Chrome & Safari */
input[type='range']::-webkit-slider-runnable-track {
background: purple;
border-radius: 4px;
width: 100%;
height: 10px;
cursor: pointer;
}
input[type='range']::-webkit-slider-thumb {
-webkit-appearance: none;
height: 24px;
width: 24px;
background: #fff;
border-radius: 50%;
border: 1px solid purple;
margin-top: -7px;
cursor: pointer;
}
/* Firefox */
input[type='range']::-moz-range-track {
background: purple;
border-radius: 4px;
width: 100%;
height: 13px;
cursor: pointer;
}
input[type='range']::-moz-range-thumb {
-webkit-appearance: none;
height: 24px;
width: 24px;
background: #fff;
border-radius: 50%;
border: 1px solid purple;
margin-top: -7px;
cursor: pointer;
}
/* IE */
input[type='range']::-ms-track {
background: purple;
border-radius: 4px;
width: 100%;
height: 13px;
cursor: pointer;
}
input[type='range']::-ms-thumb {
-webkit-appearance: none;
height: 24px;
width: 24px;
background: #fff;
border-radius: 50%;
border: 1px solid purple;
margin-top: -7px;
cursor: pointer;
}Now we have completed our CSS section, Here is our updated output HTML + CSS.
Restaurant Website Using HTML and CSS
Output
JavaScript Code For Custom Range Slider
const range = document.getElementById('range')
range.addEventListener('input', (e) => {
const value = +e.target.value
const label = e.target.nextElementSibling
const range_width = getComputedStyle(e.target).getPropertyValue('width')
const label_width = getComputedStyle(label).getPropertyValue('width')
const num_width = +range_width.substring(0, range_width.length - 2)
const num_label_width = +label_width.substring(0, label_width.length - 2)
const max = +e.target.max
const min = +e.target.min
const left = value * (num_width / max) - num_label_width / 2 + scale(value, min, max, 10, -10)
label.style.left = `${left}px`
label.innerHTML = value
})
const scale = (num, in_min, in_max, out_min, out_max) => {
return (num - in_min) * (out_max - out_min) / (in_max - in_min) + out_min;
}Final Output Of Custom Range Slider
10+ HTML CSS Projects For Beginners with Source Code
Now we have completed our Custom Range Slider. Here is our updated output with JavaScript. Hope you like the custom range slider. you can see the output video and project screenshots. See our other blogs and gain knowledge in front-end development.
Thank you!
In this post, we learn how to create a Custom Range Slider Using HTML, CSS, and JavaScript. If we made a mistake or any confusion, please drop a comment to reply or help you in easy learning.
Written by – Code With Random/Anki
Code by – traversy media
