Using "data-*" and JQueryUI slider

Question

I have a page where a user can call a slider to change the look of an image. There will only ever be one slider visible but maybe 10 total. Instead of writing js function for each I'm trying to streamline using HTML5 data- variables.

This is the the html of two sliders, only one visible at a time:

<div class="editSliderHolder" id="brightness">
    <label>Brightness</label>
    <div class="editSlider" data-minVal="-20" data-maxVal="20" data-editValue="curValB"></div>
</div>

<div class="editSliderHolder" id="contrast">
    <label>Contrast</label>
    <div class="editSlider" data-minVal="-40" data-maxVal="40" data-editValue="curValC"></div>
</div>

And the JQuery I'm trying:

$(document).ready(function () {
        var div = $("div.editSlider");
        div.slider({
            value: 0,
            min: div.data("minVal"),
            max: div.data("maxVal"),
            slide: function (event, ui) {
                //alert(min); // check if value set
                div.data("editValue", ui.value);
                $(this).find('.ui-slider-handle').text(Math.round(ui.value));
            },
            stop: function(event, ui) {
                div.data("editValue", ui.value);
                Caman('#capEdit', function () { 
                    this.revert(); // restore canvas
                    this.contrast(curValC); // add contrast
                    this.brightness(curValB); // add brightness
                    this.render(); // render it
                });
            }
        });
    });

So what happens is, the min and max values are set for each slider and also the ui.value which determines which effect to change i.e. in this case, brightness or contrast.

None of the values are being set and I have no idea why. Is there a better way to do this or is this code just wrong?

Answer 1

what version of JQuery are you using?

as noted here

changes in jQuery 1.5 and 1.6 mean that data attributes are now forced to lowercase

JQuery documentation, states

the treatment of attributes with embedded dashes was changed in jQuery 1.6 to conform to the W3C HTML5 specification.

so the best way for you is to define the attributes in markup dash separated

    <div class="editSlider" data-min-val="-20" data-max-val="20" data-edit-value="curValB"></div>

, and use the camel-case version in your script

 ...
 min: div.data("minVal"),
 max: div.data("maxVal"),
 ...

Answer 2

The issue seems to be the way you try to select the .data() attributes. If you console.log them you'll notice that they're written in lowercase and not camelCase. Also you need a .each() loop to create a slider for each div with the editSlider class. (normal for loop is also possible)

console.log(div.data());
//outputs
Object {minval: -20, maxval: 20, editvalue: "curValB"} 

So you can write them as camelCase in the HTML (but shouldn't) and access it with lowercase in jQuery.

See this jsfiddle

$(document).ready(function () {
    var div = $("div.editSlider");
    div.each(function () {
        $(this).slider({
            value: 0,
            min: $(this).data("minval"),
            max: $(this).data("maxval"),
            slide: function (event, ui) {
                //alert(min); // check if value set
                $(this).data("editvalue", ui.value);
                $(this).find('.ui-slider-handle').text(Math.round(ui.value));
            },
            stop: function (event, ui) {
                $(this).data("editvalue", ui.value);
                /* Caman('#capEdit', function () { 
                    this.revert(); // restore canvas
                    this.contrast(curValC); // add contrast
                    this.brightness(curValB); // add brightness
                    this.render(); // render it
                });
                */
            }
        });
    });
});

According to MDN data-* attributes specs:

The * may be replaced by any name following the production rule of xml names with the following restrictions:

• the name must not start with xml, whatever case is used for these letters;
• the name must not contain any semicolon (U+003A);
• the name must not contain capital A to Z letters.

Here a link to the W3C specs (basically saying the same)

Answer 3

div will contain a collection of divs, so div.data("minVal") isn't going to return what you want. You want the minVal of the current div. You can try $(this).data("minVal"), but I'm not sure if this is set to the current instance or not. Repeat for maxVal, and editValue