Interactive pricing component with a interesting slider and a toggle

Community feedback

• 

  Davide•1,725

  @Da-vi-dePosted over 2 years ago

  Hi, it's good to see you tried to make it work, this project was my first one and i thought it was easy but it's not at all. So, in order to make it work you need Javascript, JS is needed not only for that, the component is called "interactive" because it changes content when you move the bar! The slider should have a mouse event like so:

  slider.addEventListener('mousemove', function() {
   const activeSlider =  slider.value;
   const sliderColor = `linear-gradient(90deg, rgb(165, 243, 235) ${activeSlider}%,
   rgb(234, 238, 251) ${activeSlider}%)`;
   slider.style.background = sliderColor;
  });
  
  

  As you can see,

  • first you need to get the value, the value is an attribute that resides in your slider range in html file, like so <input type="range" min="0" max="100" value="50" step="25" >

  • i saw your code and you miss the step attribute which is important when you need to make the slider interactive.

  • then you need to set the color so that it changes when you move it and that will be the background.

  • Yes, the slider behave differently across browsers but recently i've found a nice article that teaches how to make a custom range input that looks consistent across all browsers! Here's the link: article link range input

  If you are interested in knowing more you can see my solution where there's the most important JS part needed to make the component interactive! Hope it helps, keep coding!

  Marked as helpful

  0

  ---

  

  Aadvik•1,250

  @Aadv1kPosted over 2 years ago

  @Da-vi-de Ah ok, so this was the interactive part! I will def implement that functionality. Thanks

  0