Slider state not "ready" if user's mouse release is over slider label

JessicaHendricks444

I am trying to reduce the callbacks to the rest server for data by limiting a function to run only when the slider.state is"ready" or event.state is "stop".

This codePen illustrates the issue - is there any css or javascript fix for this? 

https://codepen.io/JLD_ccrm/pen/ZEqzdpJ?editors=1001

 

I've noticed that when the user clicks on the slider label the slider button moves, but the event.state never completes and stays at "dragging". This means that there is no state that I can consistently use to fire the rest callback like these examples that don't work:

Doesn't work: 

if (slider.state === "ready") {

 code that updates the definitionExpression for layers

}

 

Doesn't work either because the slider doesn't consistently revert to 'ready'

if (event.state ==="stop"){

 code that updates the definitionExpression for layers

}

 

Any help is very appreciated!

 

RamaniGanason

I tried different many different ways to solve this but didn't hit any possible solution. The best solution seems like hiding the label.

visibleElements: {
  labels: false,
  rangeLabels: true
},

I also tried to add on mouseover function over the labels but thus didn't work either because the labels was always undefined. Maybe, I was doing this wrongly and someone can help to let know when is the best time to get the label to add some eventlisteners.

pixelSlider.when(function() {
        // This function will execute once the promise is resolved
        console.log(pixelSlider.labelElements);
        pixelSlider.labelElements.forEach(labelElement =>
          labelElement.addEventListener('mouseover', () => {
            console.log("event");
          })
        );
      }, function(error) {
        // This function will execute if the promise is rejected due to an error
      });