Select option from dropdown field with range slider

i am trying to build a range slider that passes its values to a dropdown select field. I managed to pass the values and the dropdown is showing the selected value but it’s not working entirely.

Usually, when I select a value from the dropdown, the rest of the page changes dynamically but selecting the options with this script doesn’t seem to fire any events which tell the website, that a new value was selected. I hope it’s clear what I am trying to say. Here’s my code:

window.addEventListener("load", function(){


  var slider = document.querySelector("input[type='range']");

    slider.addEventListener("change", function(){

    let element = document.getElementById("anteil-cbd");
    element.value = this.value + "%";
    element.dispatchEvent(new Event('change'))
    
  });
});

Source: Ask Javascript Questions

LEAVE A COMMENT