Using format (seconds to hh:mm:ss) for tooltips breaks the slider function

[soli004]

If I am not using the format to hh:mm:ss the slider works fine but the tooltips is not human readable with seconds showing (its hard to read "17567.00") so I need a way to convert the seconds to hh:mm:ss for the tooltip only. But as soon as I do the format it breaks the slider function, it shows the h:mm:ss but slider stops working. I have arrival points on a map and all the points disappear when start moving the slider when using format to hh:mm:ss. This is part of the code I'm using, what is the solution to make it work? I have tried all possible way to my knowledge... thanks

    function formatTime(seconds) {
          return [
      parseInt(seconds / 60 / 60),
      parseInt(seconds / 60 % 60),
      parseInt(seconds % 60)
         ]
         .join(":")
         .replace(/\b(\d)\b/g, "0$1")
    }

     filters.range = [min, max];
     var slider = document.getElementById('slider');
     noUiSlider.create(slider, {
         start: filters.range,
         tooltips: true,
         format: {
            from: function(value) {
                    return Number(value);
                },
            to: function(value) {
                    return formatTime(value);
                }
            },
         connect: true,
         range: {
             'min': min,
             'max': max
         }
     }).on('slide', function (e) {
         filters.range = [parseFloat(e[0]), parseFloat(e[1])];
         pointsLayer.eachLayer(function (layer) {
             filterPoints (layer);
         });
     });

    function filterPoints (layer) {
         var numberOfTrue = 0;
         if(filters.text != '' && layer.feature.properties.routename.toLowerCase().lastIndexOf(filters.text.toLowerCase())>-1) {
             numberOfTrue += 1;
         }
         if(layer.feature.properties.arrivaltime >= filters.range[0] && layer.feature.properties.arrivaltime <= filters.range[1]) {
             numberOfTrue += 1;
         }
         if(numberOfTrue === 2) {
           layer.addTo(map);
         } else {
           map.removeLayer(layer);
         }
     }

[soli004]

Tried this as well but get error "must pass a formatter for all handles"

         tooltips: {
                from: function(value) {
                   return Number(value);
                },
               to: function(value) {
                   return formatTime(value);
                }
                },

[leongersen]

What noUiSlider version are you on?

[soli004]

14.6.4

[leongersen]

Ah, okay. Your last example is valid and will work from 15.1.1.

[soli004]

ahh ok, I have not used .less and .ts so not sure how you link these files as with traditional files

[leongersen]

If you're installing from npm, you can use the compiled files from dist. If not, you can grab them from the documentation for now:

https://refreshless.com/nouislider/dist/nouislider.css?v=1550 https://refreshless.com/nouislider/dist/nouislider.js?v=1550

Adding a better manual download option is #1148.

[soli004]

Excellent that did the work!!! Thank you, big smile on my face :)

[leongersen]

I'm glad I could help 😄

[github-actions[bot]]

This thread has been automatically locked since there has not been any recent activity after it was closed. Please open a new issue for related bugs.