custom range slider html | custom range slider code - codewithrandom

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.
output
custom range slider html | custom range slider code - codewithrandom

CSS Code

 @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
custom range slider html | custom range slider code - codewithrandom

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
custom range slider html | custom range slider code - codewithrandom


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 ๐Ÿ™๐Ÿ’•!

Post a Comment

Previous Post Next Post