Tracking Slider Values
Tracking Slider Values
Hi,
I'm implementing the slider for the first time and I'm pretty new to
JavaScript/jQuery.
For this page there are two sliders, each with a corresponding div
that displays the value for each. The range is 0-100 and are
displayed in % form. The sliders and the tracking divs are working
fine.
My goal is to create a third div which tracks and displays the sum of
the values from my two sliders. The sum needs to equal 100% for the
user to move on to the next step, so this visual cue is essential.
My problem is that whenever I try to capture the value of the sliders
with a variable, I only seem to get the initial value of each slider
and the variable does not change as the slider handle is moved.
This problem occurs whether I use the below variable definition... var
sosv = $("#SOSSlider .ui-slider-handle").css("left") ... or... var
sosv = $(#SOSvalue span).text() ...
I'm afraid that I'm missing something very basic, I appreciate your
time.
Here is my jQuery code:
$("#StatSlider").slider({
range: "min",
animate: true,
min: 0,
max: 100,
value: 50,
step: 5,
start: function(event,ui){
$("#StatValue").effect("highlight", {}, 2000)
},
slide: function(event,ui){
$("#StatValue span").text(ui.value + "%");
},
});
$("#SOSSlider").slider({
range: "min",
animate: true,
min: 0,
max: 100,
value: 50,
step: 5,
start: function(event,ui){
$("#SOSvalue").effect("highlight", {}, 2000)
},
slide: function(event,ui){
$("#SOSvalue span").text(ui.value + "%");
},
});
var sosv = $("#SOSSlider .ui-slider-handle").css("left")
console.log(sosv)
Thanks again,
John