Interactive Pricing Component using Bootstrap

Community feedback

• 

  Nazeer Haidari•895

  @Nazeer2020Posted about 3 years ago

  for Mozilla you can use the following CSS code

  .silder::-moz-range-progress { -moz-appearance: none; background-color: hsl(174, 86%, 45%); height: 100%; }

  and for chrome use the following css and javascript code

  input[type=range] { -webkit-appearance: none; background: linear-gradient(90deg, rgb(16, 213, 194) 0%, rgb(191,191,191) 0%); }

  const Slider = document.querySelectorAll('input[type=range]');

  Slider.forEach(e => { e.addEventListener('input', function () { e.style.setProperty('background', linear-gradient(90deg, rgb(16, 213, 194) ${e.value}%, rgb(191,191,191) ${e.value}%));

  })});

  0
• 

  Nazeer Haidari•895

  @Nazeer2020Posted about 3 years ago

  When moving the silder its background color does not change

  0

  ---

  

  Danielle S.•140

  @dstrickl7Posted about 3 years ago

  @Nazeer2020 Thank you! I did notice that but couldn't figure out how to make it work. The slider was honestly the most difficult part of this project for me.

  0