See
http://docs.jquery.com/UI/Slider#event-slide
"Use ui.value (single-handled sliders) to obtain the value of the current handle, $(..).slider('value', index) to get another handles' value.
Return false in order to prevent a slide, based on ui.value."
Although this mentions single-handled slider, you can inspect 'ui' with console.log(ui) and see it has a ui.values in the case of a multi-handled slider.
Because the slide callback can prevent the value from changing (by returning false), the value hasn't actually changed before/during the slide callback. Both the previous/current and the new/proposed value are available in this event in case they are needed for comparison. You are grabbing the last/current value before the slide; what you want is the next/new value after the slide. So you want to change
- var val1 = $("#Slider").slider("values", 0);
- var val2 = $("#Slider").slider("values", 1);
to
- var val1 = ui.values[0];
- var val2 = ui.values[1];