ADVERTISEMENT

Custom Range Slider Using HTML,CSS and JavaScript

Telegram Group Join Now

ADVERTISEMENT

Custom Range Slider Using HTML,CSS and JavaScript

Custom Range Slider
Custom Range Slider

 

ADVERTISEMENT

ADVERTISEMENT

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.

ADVERTISEMENT

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.

ADVERTISEMENT

Ecommerce Website Using HTML, CSS, & JavaScript (Source Code)

output

Custom Range Slider
Custom Range Slider

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.

ADVERTISEMENT

Restaurant Website Using HTML and CSS

Output

Custom Range Slider
Custom Range Slider

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

ADVERTISEMENT

Custom Range Slider
Custom Range Slider

 

ADVERTISEMENT

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

ADVERTISEMENT

ADVERTISEMENT

ADVERTISEMENT

Telegram Group Join Now

Share on:

Leave a Comment

ADVERTISEMENT

ADVERTISEMENT

ADVERTISEMENT