Jquery Slider UL - multiple filters -
i seek create advanced search engine based on jquery slider.
fiddle
$(document).ready(function() { $("#slider_powcalk").slider({ range:true, min: 0, max: 1000, step: 5, values: [100, 900], slide: function(event, ui) { (var = 0; < ui.values.length; ++i) { $("input.slider_powcalk_value[data-index=" + + "]").val(ui.values[i]); } } }); $("input.slider_powcalk_value").change(function() { var $this = $(this); $("#slider_powcalk").slider("values", $this.data("index"), $this.val()); }); });
i want run multiple sliders on single page , each width 2 values (inputs) how can run sec slider maintain clear code (i dont wnat re-create code , alter class only)
thanks help
note illustration duplicates ids (which must unique), doesn't cause issues code.
to want, try:
$(document).ready(function () { $("#slider_powcalk, #slider_sso").each(function () { var value = parseint($(this).text(), 10); $(this).empty().slider({ range: true, min: 0, max: 1000, step: 5, values: [100, 900], slide: function (event, ui) { (var = 0; < ui.values.length; ++i) { $(this).parent().find("input[data-index=" + + "]").val(ui.values[i]); } } }); }); $("input.slider_powcalk_value").change(function () { var $this = $(this); $("#slider_powcalk").slider("values", $this.data("index"), $this.val()); }); });
jsfiddle example
i added #slider_sso
slider instantiation $("#slider_powcalk, #slider_sso").slider({
, updated value in slide event $(this).parent().find("input[data-index=" + + "]")
.
jquery slider
No comments:
Post a Comment