CODEWITHSUNDEEP
jquery
Irene T.
Irene T.

Reputation: 1393

Get value from each Slider Jquery UI

I have some Jquery UI sliders with different data-id. How is it possible to detect who is the selected and return the sliders value in a span next to it?

<div id="slider" class="mystyle" data-id="1"></div> <span id="1"></span>
<div id="slider" class="mystyle" data-id="2"></div> <span id="2"></span>
<div id="slider" class="mystyle" data-id="3"></div> <span id="3"></span>
<div id="slider" class="mystyle" data-id="4"></div> <span id="4"></span>

I tried this one but no luck:

<script>
$(function () {
    $("#slider").slider({
        range: "max",
        min: 0,
        max: 5,
        create: function () {
            $(this).slider( "option", "value", $(this).next().val() );
        },
        slide: function (event, ui) {
            //get the id of this slider
            var id = $(this).attr("data-id")
            //select the input box that has the same id as the slider within it and set it's value to the current slider value. 
            $("span[class*=" + id + "]").text(ui.value);
            $("input[class*=" + id + "]").val(ui.value);
        }
    });
});
</script>

I am Generating the sliders dynamicaly:

<script>
$(document).ready(function() {
$("#adding").click(function() {

var intId = $("#buildyourform div").length + 1;
var fieldWrapper = $("<div class=\"fieldwrapper\" id=\"field" + intId + "\"/>");
var fName = $("<input type=\"text\" class=\"fieldname\" value=\"Enter your Facebook fan page url\" />");
var fType = $("<div id='slider' data-id='"+intId+"' style='width:250px; float:left; margin-left:10px;'></div>").slider();
var fLikes= $("<div class=\"fieldname\" id='"+ intId +"' style='width: 60px; height: 24px; float: left; margin-left: 13px; margin-top: 7px; border: 1px solid #999; color: rgb(243, 20, 145); text-align: center; font-family: serif;' />");
var fCost = $("<div class=\"fieldname\" id=\"fcost" + intId + "\" style='width: 60px; height: 24px; float: left; margin-left: 6px; margin-top: 7px; border: 1px solid #999; color: rgb(243, 20, 145); text-align: center; font-family: serif;' />");
var removeButton = $("<input type=\"button\" class=\"remove\" value=\"-\" />");
removeButton.click(function() {
$(this).parent().remove();
});
fieldWrapper.append(fName);
fieldWrapper.append(fType);
fieldWrapper.append(removeButton);
fieldWrapper.append(fLikes);
fieldWrapper.append(fCost);
$("#buildyourform").append(fieldWrapper);
});
});
</script>

Upvotes: 0

Views: 925

Answers (1)

myfunkyside
myfunkyside

Reputation: 3950

I'm pretty sure you should use a unique ID for every element on your page.. it's probably better to add 'slider' to your classes: class="slider mystyle".

Also, this line var id = $(this).attr("data-id") should have a ; at the end.
And, ID's can't start with a number, so the span-ID's are not valid.

If you give every slider a unique ID slider1, slider2, etc, you can just use the number from the ID:

HTML

<div id="slider1" class="slider mystyle" data-id="1"></div> <span id="slider1span"></span>
<div id="slider2" class="slider mystyle" data-id="2"></div> <span id="slider2span"></span>
<div id="slider3" class="slider mystyle" data-id="3"></div> <span id="slider3span"></span>
<div id="slider4" class="slider mystyle" data-id="4"></div> <span id="slider4span"></span>

(Maybe you don't even need the data-id anymore now, but that's for you to find out)


jQuery

$(function () {
    $(".slider").slider({
        range: "max",
        min: 0,
        max: 5,
        create: function () {
            $(this).slider( "option", "value", $(this).next().val() );
        },
        slide: function (event, ui) {
            //get the id of this slider
            var id = $(this).attr("id").substr('slider'.length);
            //select the input box that has the same id as the slider within it and set it's value to the current slider value. 
            $("slider"+id+"span").html(ui.value);
            $("input[class*=" + id + "]").val(ui.value);
        }
    });
});

So, I changed your HTML, and in your jQuery I changed this:
var id = $(this).attr("id").substr('slider'.length);
and this:
$("slider"+id+"span").html(ui.value); (also changed the .text to .html)


BTW, I'm not sure, but I have never seen this $("input[class*=" + id + "]").val(ui.value); before so I wouldn't trust that that works (but you might know something I don't).

If it still doesn't work, it could be because $(this) doesn't refer to the actual object. In that case, try to reference the object using the ui (http://api.jqueryui.com/slider/#event-slide).

If the different sliders don't seem to react appropriately and seem to all react to siding the first, or the first always reacts whatever slider you change, then that's because of this line: $(".slider").slider({. In that case, put it in a for-loop and attach the events to every slider by ID:

$(function () {
  for (var i=1; i<=4; i++) {
    $("#slider"+i).slider({
      //rest of the code
    });
  }
});

Upvotes: 1

Related Questions