Custom strings for the tooltips

[FackelAB]

It would be great - if is would be possible to provide a map with values the should be replace with defined strings.

Example: Rating for a movie (German FSK-Rating in the example) Rang: 0 up to 22 Tooltips now: 0,1,2,3,4 Tooltips now: FSK 0, FSK 6, FSK 12, FSK 16, FSK 18 The Map would be: 0,"FSK 0" 1,"FSK 6" 2,"FSK 12" 3,"FSK 16" 4,"FSK 18"

All values not in the map should be rendered as normal. i.e. the max value for the range would be 5. But the is not mapping for the five in the map - the number should be displayed.

[aschemschat]

Hi, I will look into it, but unfortunately i can't make any promises as to when i might make it right now :/ (Same goes for the other request)

[hangorn]

Hi, I get it working executing some JavaScript from server-side. Probably there is a much better way of doing it, but it is working.

Javascript code in file "js/custom-tooltips-rangeslider.js":

// List of tooltips
var txtTooltips = [::TXT_TOOLTIPS::];
// DOM object
var htmlElement = document.getElementById('::ID_SLIDER::');
// Internal noUiSlider object
var noUiSliderElement = htmlElement.children[0].noUiSlider;

// Method to transform tooltips
var tooltipFormater = function(value) {
    var roundedValue = Math.round(value);
    if (txtTooltips[roundedValue] === undefined) {
        return value;
    }
    return txtTooltips[roundedValue];
};

// Update every tooltip formatter. Looking into source code, looks like if option.tooltip array contains something is not "true", calls a "to" method
for (var i= 0; i<noUiSliderElement.options.tooltips.length; i++) {
    noUiSliderElement.options.tooltips[i] = {from:tooltipFormater, to:tooltipFormater};
}

// Update the current text of the tooltips 
var lowerTooltip = htmlElement.getElementsByClassName('noUi-handle-lower')[0].getElementsByClassName('noUi-tooltip')[0];
lowerTooltip.innerHTML = tooltipFormater(lowerTooltip.innerHTML);
var upperTooltip = htmlElement.getElementsByClassName('noUi-handle-upper')[0].getElementsByClassName('noUi-tooltip')[0];
upperTooltip.innerHTML = tooltipFormater(upperTooltip.innerHTML);

Code executed from server-side:

List<String> items = Arrays.asList("Item1","Item2","Item1");
RangeSlider slider = new RangeSlider(new Range(0, items.size()-1));
slider.setId("slider-fechas");
slider.addValueChangeListener(e->customSliderTooltips(items));

customSliderTooltips(items);

...

public void customSliderTooltips(List<String> items) {
    String tooltips = "";
    for (String item : items) {
        if (tooltips.isEmpty()) {
            tooltips += ",";
        }
        tooltips += "'"+item +"'";
    }
    String js = IOUtils.toString(getClass().getClassLoader().getResourceAsStream("js/custom-tooltips-rangeslider.js"))
                .replace("::TXT_TOOLTIPS::", tooltips)
                .replace("::ID_SLIDER::", "slider-fechas");
    JavaScript.eval(js);
}

Hope this works for someone.