Dynamic tooltips label based on value

[sagive]

Hey, first i want to say thank you. You created a great library (very usefull).

I am working on a project which requires me to change the text label inside the tooltip on the fly based on the content.

A simple example: say i have a range of 500mb to 6400mb

I would like to change 6400mb to 64GB or to be preceise as soon the top value (this is a two handles range) passes the 1000mb to 1GB.

However i need to change only the text label inside that tooltip and not the aria-value which i need as is for filtering.

I tried doing this:

• small comment: some variables are "returned" via php - the syntax might seem wierd (but i get no errors and everything works)

<script>
noUiSlider.create(rangeSlider, {
    connect: true,
    '.(!empty($unordered) ? 'snap: true,' : '').'
    range: {
        "min": '.$min.',
        '.(!empty($unordered) ? $prmStr : '').'
        "max": '.$max.'
    },
    start: ['.$start.', '.$end.'],
    tooltips: [true, true],
    format: {
        to: function(value) {
            return conditional_val(value);    // function to change based on value
            console.log("ran func");
        }, 
        from: function(value) {
            return value;
        }
    }
});
</script>

But as i have learned the value doesnt change on drag / snap inside the format section. any ideas how i could accomplish this in a slim way?

[sagive]

I got it.. sorry for the bother.

comment for anyone reaching here via search: Please Note: i am using some php variables which are unrelated to the script itself.

<script>
jQuery(function($){

    var numBigLimit     = parseInt("'.$rangeSettings['big_numlimit'].'");
    var textaddonBig    = "'.$rangeSettings['textaddon_big'].'";
    var rangeSlider = document.getElementById("'.$rangeId.'");

    rangeSlider.noUiSlider.on("update", function(values, handle, unencoded ) {

        // values: Current slider values;   - Example:  4000.00,32000.00  (object)
        // handle: Handle that caused the event;  0 or 1
        // unencoded: Slider values without formatting;  Example: 4000,32000  (object)

        if(unencoded[handle] >= numBigLimit) {
            var newVal = ( Math.round( (unencoded[handle] / numBigLimit) * 10 ) / 10 ) + textaddonBig;
            $("#'.$rangeId.'").find(".noUi-handle[data-handle=\""+handle+"\"] .noUi-tooltip").text(newVal);
        }

    });
});
</script>

[leongersen]

Instead of passing that format option directly to the slider, pass it in the tooltips array.

There's an example in the docs:

https://refreshless.com/nouislider/slider-options/#section-tooltips

[leongersen]

Glad you worked it out!

[sagive]

i tried that but since the function should update on every change (while checking if larger than X than creating the math to return a new number and adding a different text addon) it didnt work

[seanhak]

Thanks Sagive for your example. It would be nice if there was a more native approach, instead of searching the DOM.

In my use case its more of a UI/UX thing: 0: "None", 1-4999: {value}, 5000:"All"

Could this be considered as a future Feature?

[leongersen]

@seanhak Could you please open a new issue for any feature discussion?

[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.