data-slider-rangehighlights="[{start: 0, end: 100}]"

[Fenny]

<input type="text" data-slider-min="0" data-slider-max="200" data-slider-tooltip="show" data-slider-tooltip-position="bottom" data-slider-rangehighlights="[{start: 0, end: 100}]">

rangehighlights not working

[seiyria]

post a jsfiddle please

[Fenny]

https://jsfiddle.net/zeuwgcLy/1/

No highlight to be found :|

[Fenny]

/* Create highlight range elements */
rangeHighlightElement.className = "slider-rangeHighlight slider-selection " + customClassString;

Even if I assign a class, it doesn't work https://jsfiddle.net/zeuwgcLy/5/

[seiyria]

It seems like it works if you add it in there like so: https://jsfiddle.net/zeuwgcLy/4/

I'm not sure why it works on the example page

[Fenny]

Weird :| maybe because the code has issues parsing the data-attribute array?

[jespirit]

Weird :| maybe because the code has issues parsing the data-attribute array?

Right on the money. The data-slider-rangeHighlights attribute should be parsed as an array, but it's being treated as a string instead. See image below.

I will look into it.

function getDataAttrib(element, optName) {
    var dataName = "data-slider-" + optName.replace(/_/g, '-');
    var dataValString = element.getAttribute(dataName);

    try {
        return JSON.parse(dataValString);
    }
    catch(err) {
        return dataValString;
    }
}

[jespirit]

Found it. JSON expects double quotes for keys and strings, single quotes are not allowed.

https://stackoverflow.com/questions/14355655/jquery-parsejson-single-quote-vs-double-quote

Fix:

https://jsfiddle.net/zeuwgcLy/6/

Note: Should most likely document this for new users.

[Fenny]

@jespirit nice catch man, any idea how we can adjust the parse function to accept single or no quotes?

[seiyria]

Sadly that's how JSON works. It probably won't get any easier.