jQuery UI slider set value from data attribute

Question

Hey I have a handful of jquery sliders called "lp-slider" set up like so:

                 <div class="xs-col-12">
                        <div class="col-xs-2 label label-default">Grit</div>
                        <div class="col-xs-9">
                            <div class="lp-slider" data-lpScore="30"></div>
                        </div>
                        <div class="col-xs-1"><img class="slider-img" src="images/close-white.png"></div>
                        <br class="clear-fix">
                    </div>
                    <div class="xs-col-12 spacer-med">
                        <div class="col-xs-2 label label-default">Self-efficacy</div>
                        <div class="col-xs-9">
                            <div class="lp-slider" data-lpScore="30"></div>
                        </div>
                        <div class="col-xs-1"><img class="slider-img" src="images/close-white.png"></div>
                        <br class="clear-fix">
                    </div>
                    <div class="xs-col-12 spacer-med">
                        <div class="col-xs-2 label label-default">Sociability</div>
                        <div class="col-xs-9">
                            <div class="lp-slider" data-lpScore="30"></div>
                        </div>
                        <div class="col-xs-1"><img class="slider-img" src="images/close-white.png"></div>
                        <br class="clear-fix">
                    </div>

I'd like to run an each statement on them so that it grabs the data attribute and uses it to set the slider value. I tried this and I can't quite seem to figure out how to get it to work. It sets up the slider but value part doesn't work correctly:

$(".lp-slider").each(function() {
    var value = $(this).data("lpScore");
    $(this).slider({
        value:value,
        range:"min",
        min:1,
        max:100,
        step:1
    });
});

score 6 · Accepted Answer · edited May 23 '17 at 12:09

6

To get a data attribute using jQuery's data() you have to write it in lowercase like lpscore.

Here a deep explanation of the rules applied by data Using data attributes with jQuery

Code:

$(".lp-slider").each(function () {
    var value = $(this).data("lpscore");
    $(this).slider({
        value: value,
        range: "min",
        min: 1,
        max: 100,
        step: 1
    });
});

Demo: http://jsfiddle.net/IrvinDominin/G3vy6/

edited May 23 '17 at 12:09

Community

1
1

answered Jan 02 '14 at 16:23

Irvin Dominin

30,819
9
77
111

1

wow, haha that makes me want to slap myself, thanks for that! – loriensleafs Jan 02 '14 at 16:25
Yes, it's a nice pitfall of jQuery data :-\ – Irvin Dominin Jan 02 '14 at 16:25
How did you arrive at that conclusion based on the linked document? – isherwood Jan 02 '14 at 16:26
@isherwood From data-lpScore="30" and var value = $(this).data("lpScore"); <--camel case – Irvin Dominin Jan 02 '14 at 16:27
1

I'm not sure how that answers my question. Anyway, I got some clarification here: http://stackoverflow.com/questions/7641551/have-jquery-ignore-case-in-attribute-data-names – isherwood Jan 02 '14 at 16:28
@isherwood ouch I'm sorry are you asking for clarification, yes you found a good reference – Irvin Dominin Jan 02 '14 at 16:30
@loriensleafs same here :D – GDY Sep 13 '16 at 07:24

jQuery UI slider set value from data attribute

1 Answers1