Range Slider Using HTML , CSS & Java Script

Hey Guys , In Today’s Blog We are going to see How to create an Range Slider Using HTML , CSS & JavaScript. For that the respective sources codes were given below along with the respective preview of output section. So you can make use of that.

Now The Project is going to create and for that we are first adding an HTML Code.

HTML CODE:

<range-slider min="0" max="100" step="1" dir="rtl"></range-slider>

Here Simply We Creating an range slider class with minimum and maximum values for selection between low and high numbers.

Now we are going to style it out by adding CSS.

The Respective code is given down.

CSS CODE:

body {
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: 100vh;
  max-width: 500px;
  margin: 0 auto;
  padding: 1em;
}

output {
  font-weight: 600;
  text-align: center;
}

Here First We creating an body section and adding the flex box properties with margin and padding. So the slide would look attractive and user friendly.

Then The output section is filled with font-weight and text-align.

How to Create a Weather App using JavaScript

Now the Last part is about Java script Which would make the slider to show values according to the movement.

JAVA SCRIPT CODE:

const elements = document.querySelectorAll(['range-slider']);

elements.forEach(element => {
  element.insertAdjacentHTML('afterend', `
    <output>${element.value}</output>
  `);
});

document.addEventListener('input', e => {
  const input = e.target;
  const output = input.nextElementSibling;
  if (output) {
    output.textContent = input.value;
  }
});

First We are selecting the range selector element by using Java Script query selector property. Now we comparing each and every element by using foreach property and declaring an element output and inside the value is added.

With the Help of add event listener property we are grabbing input for slider and checking condition if output is true then the text content with slider values is fixed and hence when we start slide then it would show  the values according to increase/decrease of slider.

Now We have completed out Java Script code and hence we came to end of this project , So make sure to preview the project given below.

FINAL OUTPUT:

Now We have Successfully created our Double Range Slider Using HTML ,CSS & Java Script. You can use this project for your personnel needs and the respective lines of code are given with the code pen link mentioned below.

100+ JavaScript Projects With Source Code ( Beginners to Advanced)

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.

REFER CODE- Andre Ruffert

WRITTEN BY- Ragunathan