Double Range Slider

Custom double range slider

To create our custom slider we will make use of the native input type range, well, two of them. The idea in a nutshell is to hide the inputs and set / update visually our custom slider based on the values of those inputs.

HTML

• the text labels holding the values
• the inputs
• the custom slider (thumbs, track and the range between)

CSS

The main idea is pretty straight forward, visually hide the inputs and place our custom slider elements on top of the inputs.

JavaScript

We will initialise and hydrate our custom slider with the default input values and then listen for any input change so we can visually update the custom slider and the labels.

In order to achieve this we will write some functions

setLabelValue(label, input) this function takes a label together with an input. It sets the label inner text to the input’s value, and will run every-time the value of the input changes

To visually set the value of our custom slider we will separate the logic into two functions, one for each side, since each calculates its values slightly different.

let’s have a look at the start / left-side function.

setStartValueCustomSlider(inputStart, inputEnd, pseudoEl, range) it includes both inputs because we need to prevent our start value to go past inputEnd’s value.

In code it would look something like:

 const maximum = Math.min(parseInt(inputStart.value), parseInt(inputEnd.value) - 1); 

Next, we proceed to calculate our percentage based on the input’s values so we update our UI.

 const percent = ((maximum - inputStart.min) / (inputStart.max - inputStart.min)) * 100; 

Now that we know the current position, we can go ahead and visually update our thumb and the range aka what is in between both of thumbs.

pseudoEl.style.left = percent + '%'; range.style.left = percent + '%'; 

Last, we need to run these two functions whenever the inputs value change, we do this by listening to the «input» event on each input.

inputStart.addEventListener('input', () => < setStartValueCustomSlider(inputStart, inputEnd, thumbLeft, rangeBetween); setLabelValue(labelMin, inputStart); >); inputEnd.addEventListener('input', () => < setEndValueCustomSlider(inputEnd, inputStart, thumbRight, rangeBetween); setLabelValue(labelMax, inputEnd); >); 

(The end / right-side function is quite similar, you can inspect it in the demo below.)

Источник

Double Range Slider | HTML, CSS, Javascript

Hey everyone. Welcome to today’s tutorial. In this tutorial, we will learn how to create a double range slider. To build this slider, we need HTML, CSS and Javascript.

A typical slider consists of a slider track and a movable thumb. The user has to move the thumb horizontally across the slider to set the value. Unlike a typical slider, the double slider consists of two thumbs. In a double-range slider, the user can set two values.

This is an intermediate-level javascript project. If you are looking for more such projects to practice your javascript skills, you can check out this playlist here. This playlist consists of 100+ javascript projects.

The difficulty of these projects varies from simple to quite complex ones. Hence this playlist is suitable for all kinds of javascript learners, including javascript beginners to javascript experts.

Video Tutorial:

If you are interested to learn by watching a video tutorial rather than reading this blog post, you can check out the video below. Also do not forget to subscribe to my youtube channel, where I post new tips, tricks and tutorials regularly.

Project Folder Structure:

Before we start coding, let us take a look at the project folder structure. We create a project folder called- ‘Double Range Slider’. Inside this folder, we have three files. These files are – index.html, style.css and script.js. The first file is index.html which is our HTML document. Next, we have style.css which is the stylesheet. And finally, we have script.js which is the script file.

HTML:

We begin with the HTML code. First, copy the code below and paste it into your HTML document.

Our HTML code consists of two span elements to display the values. Followed by the span elements we have a container that wraps a div with the class name ‘slider-track’ and two range sliders.

         
 
 0 ‐ 100 
 

CSS:

We use CSS to position and style these sliders. For this, copy the code below and paste it into your stylesheet.

*, *:before, *:after < padding: 0; margin: 0; box-sizing: border-box; font-family: "Poppins",sans-serif; >body < height: 100vh; display: -ms-grid; display: grid; background-color: #3264fe; place-items: center; >.wrapper < position: relative; width: 95vmin; background-color: #ffffff; padding: 50px 40px 20px 40px; border-radius: 10px; >.container < position: relative; width: 100%; height: 100px; margin-top: 30px; >input[type=»range»] < -webkit-appearance: none; -moz-appearance: none; appearance: none; width: 100%; outline: none; position: absolute; margin: auto; top: 0; bottom: 0; background-color: transparent; pointer-events: none; >.slider-track < width: 100%; height: 5px; position: absolute; margin: auto; top: 0; bottom: 0; border-radius: 5px; >input[type=»range»]::-webkit-slider-runnable-track < -webkit-appearance: none; height: 5px; >input[type=»range»]::-moz-range-track < -moz-appearance: none; height: 5px; >input[type=»range»]::-ms-track < appearance: none; height: 5px; >input[type=»range»]::-webkit-slider-thumb < -webkit-appearance: none; height: 1.7em; width: 1.7em; background-color: #3264fe; cursor: pointer; margin-top: -9px; pointer-events: auto; border-radius: 50%; >input[type=»range»]::-moz-range-thumb < -webkit-appearance: none; height: 1.7em; width: 1.7em; cursor: pointer; border-radius: 50%; background-color: #3264fe; pointer-events: auto; >input[type=»range»]::-ms-thumb < appearance: none; height: 1.7em; width: 1.7em; cursor: pointer; border-radius: 50%; background-color: #3264fe; pointer-events: auto; >input[type=»range»]:active::-webkit-slider-thumb < background-color: #ffffff; border: 3px solid #3264fe; >.values < background-color: #3264fe; width: 32%; position: relative; margin: auto; padding: 10px 0; border-radius: 5px; text-align: center; font-weight: 500; font-size: 25px; color: #ffffff; >.values:before

Javascript:

We finally implement the functionality for our double range slider with javascript. For this once again copy the code provided to you below and paste it into your script file.

window.onload = function() < slideOne(); slideTwo(); >let sliderOne = document.getElementById("slider-1"); let sliderTwo = document.getElementById("slider-2"); let displayValOne = document.getElementById("range1"); let displayValTwo = document.getElementById("range2"); let minGap = 0; let sliderTrack = document.querySelector(".slider-track"); let sliderMaxValue = document.getElementById("slider-1").max; function slideOne() < if(parseInt(sliderTwo.value) - parseInt(sliderOne.value) displayValOne.textContent = sliderOne.value; fillColor(); > function slideTwo() < if(parseInt(sliderTwo.value) - parseInt(sliderOne.value) displayValTwo.textContent = sliderTwo.value; fillColor(); > function fillColor()< percent1 = (sliderOne.value / sliderMaxValue) * 100; percent2 = (sliderTwo.value / sliderMaxValue) * 100; sliderTrack.style.background = `linear-gradient(to right, #dadae5 $% , #3264fe $% , #3264fe $%, #dadae5 $%)`; >

That’s all for this tutorial. If you face any issues while creating this code, you can download the source code by clicking on the ‘Download Code’ button below. Also, I would love to hear from you guys, so if you have any queries, suggestions, or feedback, you can comment below.
Happy Coding!

• Tags
• custom range slider
• double range slider
• double value slider
• dual range slider
• dual thumb slider
• multi range slider
• multi thumb slider
• range slider
• slider with two inputs

Источник

Double Range Slider Using HTML & JavaScript

Hello everyone. Welcome to today’s tutorial on Codewithrandom. We’ll learn how to make a Double Range Slider Using Html, Css, and JavaScript. a project which is basically seen in online shopping platforms to set the range of the budget which the user requires.

The HTML (Hypertext Markup Language) will help us to create the structure for the list with some necessary attributes and elements to make the Double Range Slider Project.

Then we will use CSS (Cascading Stylesheet) which will help us to style or design the project with suitable padding and alignment in the Double Range Slider Project.

At last, we will use JS (JavaScript) which will add logic to make the Double Range Slider Project responsive from the user end.

I hope you have got an idea about the project.

HTML Code for Double Range Slider:-

    [email protected]&display=swap" rel="stylesheet">   
 
 0 ‐ 100 
 

We’ll begin by building the Double Range Slider project’s framework. As you can see from the code above, we build up the structure using all the required elements and attributes. We will make a wrapper class for our range slider using the div tag, set the value to 0 using the div tag with class values, add the dash sign using the &dash tag, and then add the next number using the div tag.

We will now build two range sliders using the input type range. A minimal and maximum width have already been established for these range slider values.

Let us know code the CSS part to add styling and aligned the tags.

Do you want to learn HTML to JavaScript? 🔥

If yes, then here is our Master Frontend: Zero to Hero eBook! 📚 In this eBook, you’ll learn complete HTML, CSS, Bootstrap, and JavaScript from beginner to advance level. 💪 It includes 450 Projects with source code.

HTML Code Output:

CSS Code for Duble Range Slider:-

*, *:before, *:after < padding: 0; margin: 0; box-sizing: border-box; font-family: "Poppins",sans-serif; >body < height: 100vh; display: -ms-grid; display: grid; background-color: #3264fe; place-items: center; >.wrapper < position: relative; width: 95vmin; background-color: #ffffff; padding: 50px 40px 20px 40px; border-radius: 10px; >.container < position: relative; width: 100%; height: 100px; margin-top: 30px; >input[type=»range»] < -webkit-appearance: none; -moz-appearance: none; appearance: none; width: 100%; outline: none; position: absolute; margin: auto; top: 0; bottom: 0; background-color: transparent; pointer-events: none; >.slider-track < width: 100%; height: 5px; position: absolute; margin: auto; top: 0; bottom: 0; border-radius: 5px; >input[type=»range»]::-webkit-slider-runnable-track < -webkit-appearance: none; height: 5px; >input[type=»range»]::-moz-range-track < -moz-appearance: none; height: 5px; >input[type=»range»]::-ms-track < appearance: none; height: 5px; >input[type=»range»]::-webkit-slider-thumb < -webkit-appearance: none; height: 1.7em; width: 1.7em; background-color: #3264fe; cursor: pointer; margin-top: -9px; pointer-events: auto; border-radius: 50%; >input[type=»range»]::-moz-range-thumb < -webkit-appearance: none; height: 1.7em; width: 1.7em; cursor: pointer; border-radius: 50%; background-color: #3264fe; pointer-events: auto; >input[type=»range»]::-ms-thumb < appearance: none; height: 1.7em; width: 1.7em; cursor: pointer; border-radius: 50%; background-color: #3264fe; pointer-events: auto; >input[type=»range»]:active::-webkit-slider-thumb < background-color: #ffffff; border: 3px solid #3264fe; >.values < background-color: #3264fe; width: 32%; position: relative; margin: auto; padding: 10px 0; border-radius: 5px; text-align: center; font-weight: 500; font-size: 25px; color: #ffffff; >.values:before

Second, comes the CSS code which we have styled for the structure we have padded as well as aligned the Double Range Slider project so that it is properly situated and doesn’t get messy with suitable CSS elements.

Step1:The padding and margin will be set to zero using the universal tag selector, the box size will be set to “,” and the font family will be set to “Poppins” using the font family attribute.

Now that we have selected the body tag, we will set the height to “100 vh,” the display property will be set to “grid,” and the position items property will be used to centre the items on the page.

Step2: Now using the class selector (.wrapper) we will set the position as “relative” and using the width property we will set the width as 95vmin and using the border radius property we will set the border radius as “10px”.

Now using the input tag selector we will add styling to our range sliders the width of our range sliders are set as “100%” and using the position property we will set the position as “Absolute” and using the background property we will set the background-color as “transparent”.

input[type=»range»]::-webkit-slider-runnable-track < -webkit-appearance: none; height: 5px; >input[type=»range»]::-moz-range-track < -moz-appearance: none; height: 5px; >input[type=»range»]::-ms-track < appearance: none; height: 5px; >input[type=»range»]::-webkit-slider-thumb < -webkit-appearance: none; height: 1.7em; width: 1.7em; background-color: #3264fe; cursor: pointer; margin-top: -9px; pointer-events: auto; border-radius: 50%; >input[type=»range»]::-moz-range-thumb < -webkit-appearance: none; height: 1.7em; width: 1.7em; cursor: pointer; border-radius: 50%; background-color: #3264fe; pointer-events: auto; >input[type=»range»]::-ms-thumb < appearance: none; height: 1.7em; width: 1.7em; cursor: pointer; border-radius: 50%; background-color: #3264fe; pointer-events: auto; >input[type=»range»]:active::-webkit-slider-thumb

Step3: Now that we have added styling to the value, we will use the class selector (.values) to change the background colour to “blue,” the width to “32%,” the position to be “Absolute,” and the border radius to be 5px. Through the use of the text-aligned property, the content is centred.

HTML + CSS Code Output:

Now, let’s code the JavaScript part to make it responsive.

JavaScript Code for Double Range Slider:-

window.onload = function() < slideOne(); slideTwo(); >let sliderOne = document.getElementById("slider-1"); let sliderTwo = document.getElementById("slider-2"); let displayValOne = document.getElementById("range1"); let displayValTwo = document.getElementById("range2"); let minGap = 0; let sliderTrack = document.querySelector(".slider-track"); let sliderMaxValue = document.getElementById("slider-1").max; function slideOne() < if(parseInt(sliderTwo.value) - parseInt(sliderOne.value) displayValOne.textContent = sliderOne.value; fillColor(); > function slideTwo() < if(parseInt(sliderTwo.value) - parseInt(sliderOne.value) displayValTwo.textContent = sliderTwo.value; fillColor(); > function fillColor()< percent1 = (sliderOne.value / sliderMaxValue) * 100; percent2 = (sliderTwo.value / sliderMaxValue) * 100; sliderTrack.style.background = `linear-gradient(to right, #dadae5 $% , #3264fe $% , #3264fe $%, #dadae5 $%)`; >

We will now construct two additional functions, slideone() and slidetwo, using the window.onload function inside the function.(). We will now pick every HTML element using document.queryselector. We will now convert the slider’s value into an int and subtract it from two to get one using the method sliderone() and the if condition. Additionally, we will colour-fill our slider’s interior.

To change the slider values, we will similarly build the slidetwo() function and use the if condition to subtract two from one inside of it.

Last stage of the project the JavaScript which we added the logic and coded as per the requirement with some conditions. Let us see the Final Output of the project Double Range Slider Using HTML, CSS & JavaScript.

Final Output Of Double Range Slider Using JavaScript:-

Live Output:-

See the Pen
Range Slider by Harsh Sawant (@harshh9)
on CodePen.

We have successfully created our Double Range Slider Using HTML, CSS & JavaScript. You can use this project for your personal needs and the respective lines of code are given with the code pen link mentioned above.

If you find out this Blog helpful, then make sure to search code with random on google for Front End Projects with Source codes and make sure to Follow the Code with Random Instagram page.

Thank You And Keep Learning.

Источник