Select to view content in your preferred language

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

04-05-2023 10:54 AM
New Contributor II

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? 

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!


0 Kudos
2 Replies
New Contributor III

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
        pixelSlider.labelElements.forEach(labelElement =>
          labelElement.addEventListener('mouseover', () => {
      }, function(error) {
        // This function will execute if the promise is rejected due to an error
0 Kudos
New Contributor II

Thank you for trying with this.

I don't want to hide the label because in my viewer that label helps the user know what criteria is being used for filter. I don't think having just the button is enough for the user. 

0 Kudos