Плъзгащ jquery и "data-" атрибути в HTML5 - html5, jquery-ui, jquery-ui-slider

Опитах се да използвам плъзгача jquery UI за дните от седмицата:

<!-- 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>

Стойностите по подразбиране се съдържат в „data-start“ и „data-end“ на div, но не мога да ги получавам с:

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

Получих грешката по-долу (отстраняване на грешки с chrome)

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

всички знаят защо? Благодаря ти

---- РЕДАКТИРАНЕ

Сега тя работи благодарение на помощта на Itay с кода по-долу:

$("#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
});
});

Отговори:

За да обобщим дискусията, която имахме по коментарите, използвайте следния код (идеята беше моя, но писането беше ваше, което е страхотно!)

$("#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
});
});