Problem setting values with HTML

[jenstornell]

This issue I had before so it's not only the development branch.

HTML

<div class="slider">
    <input type="range" class="rangeslider" min="0" max="15" value="5" step="1" data-rangeslider>
</div>

JS code

Might be a little messy but when I uncomment what I have commented, it works. Now with the comments the slider function work but it does not get the slider values from the HTML. It says undefined.

My current solution is that I force the values to the JS. It works but it bloats the JS a little bit.

Maybe it's a bug, or maybe I just missed something.

document.addEventListener("DOMContentLoaded", function() {
    if( document.querySelector('.template-home') ) {
        var slider = document.querySelector('.slider');
        var max = document.querySelector('.rangeslider').getAttribute('max');
        var value = document.querySelector('.rangeslider').getAttribute('value');

        var slider_values = {};
        rangesliderJs.create(slider, {
            // callbacks
            /*min: 0,
            max: max,
            value: value,
            step: 1,*/
            onInit: function () {
                var json = get_array_from_data_json();
                var init_value = document.querySelector('.rangeslider').getAttribute('value');
                var init_price = json[init_value];

                document.querySelector('.rangeslider__handle').innerHTML = '<div class="value">' + init_price + ' kr</div>';
            },
            onSlideStart: function (value, percent, position) {
            },
            onSlide: function (value, percent, position) {
                var json = get_array_from_data_json();
                document.querySelector('.value').innerHTML = json[value] + ' kr';
            },
            onSlideEnd: function (value, percent, position) {
                console.log( 'END' + value + " " + position);

                var json = get_array_from_data_json();
                slider_values['belopp'] = json[value];

                ajax_callback( slider_values );
            }
        });
    }
});

[stbaer]

Thanks for reporting, will look into this soon.

[stbaer]

@jenstornell - could you provide a jsfiddle that shows what is not working?

[jenstornell]

Sure! Check the console when drag and release. In the fiddle the value is at most 100, but I have set max="15" in my input range html. The other html settings are probably also not working.

http://jsfiddle.net/fpLknbw9/4/

There are also javascript values commented out. If uncommenting them it works because that way I get the numbers myself by javascript, as a workaround. I would prefer by setting the values in the html.

[stbaer]

Ok, this should be

var slider = document.querySelector('.rangeslider');

Heres the updated fiddle: http://jsfiddle.net/fpLknbw9/5/

[jenstornell]

Ahh, so simple! Then I'm surprised it worked at all the other way.