Slider jquery and "data-" attributes in HTML5

Question

I've tried to implement the jquery UI "slider" for the weekdays :

<!-- Sliders -->
<span id="sliderList">
    <div id="slider-range-sunday" data-start="14" data-end="18"></div></br/>
    <div id="slider-range-monday" data-start="1" data-end="1"></div></br/>
    <div id="slider-range-tuesday" data-start="1" data-end="1"></div></br/>
    <div id="slider-range-wednesday" data-start="1" data-end="1"></div></br/>
    <div id="slider-range-thursday" data-start="1" data-end="1"></div></br/>
    <div id="slider-range-friday" data-start="1" data-end="1"></div></br/>
    <div id="slider-range-saturday" data-start="1" data-end="1"></div>
</span>


<script type="text/javascript">
    $("#sliderList > div ").slider({
        range: true,
        min: 0,
        max: 24,
        values: [ parseInt($(this).attr("data-start")) , parseInt($(this).attr("data-end"))]
    });
</script>

Default values are contained in the "data-start" and "data-end" of the div, but I cannot acces them with :

$(this).attr("data-start")

I got the below error (debug with chrome)

Uncaught TypeError: Cannot call method 'addClass' of undefined 
jquery.ui.slider.js?body=1:204

does everyone know why ? Thank you

---- EDIT

Now it works thanks to the help of Itay with the below code :

$("#sliderList > div ").each(function(index){
    $(this).slider({
         range: true,
         min: 0,
         max: 24,
         values: [ parseInt($(this).attr("data-start")) , parseInt($(this).attr("data-end"))],
         slide: slideTime
     });
});

My real code call the "attr" method (sorry). I also tried with data("start") (it was my first choice) but the same error occured. — johann
– johann, Commented Sep 15, 2013 at 8:23
You have a problem calling the addClass method, but the code you posted doesn't show such calls. — Itay
– Itay, Commented Sep 15, 2013 at 8:48
"addClass" is called by Jquery method "slider". I think that values attributes doesn't work. — johann
– johann, Commented Sep 15, 2013 at 8:58

Itay · Accepted Answer · 2013-09-15 09:59:51Z

1

To sum up the discussion we had on the comments, use the following code (the idea was mine but the writing was all yours, which is great!):

$("#sliderList > div ").each(function(){
    $(this).slider({
         range: true,
         min: 0,
         max: 24,
         values: [ parseInt($(this).attr("data-start")),
                   parseInt($(this).attr("data-end"))],
         slide: slideTime
     });
});

answered Sep 15, 2013 at 9:59

Itay

16.8k2 gold badges56 silver badges72 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Slider jquery and "data-" attributes in HTML5

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related