custom range slider html | custom range slider code – codewithrandom

Custom range slider html | custom range slider code – codewithrandom

Welcome🎉 to Code With Random blog. In this blog, we learn that how we create a custom range slider. We use HTML, Css, and javascript for this custom range slider. Hope you enjoy our blog so let’s start with a basic HTML structure for a custom range slider.

HTML code

 <!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, then we write css & javascript 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 CSS.

output

Javascript code 

 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


Now we have completed our javascript section,  Here is our updated output with javascriptHope you like the custom range slider. you can see 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 simple 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

Check out more…..

Leave a Reply