Question

I am using for a short period ui slider utility and ended with the following situation. I have three sliders combined in order to use their result and alter an object’s css box-shadow. This is my code:

$('#slider2, #slider3, #slider4').slider({
    range: 'min',
    min: 0,
    max: 100,
    step: 1,
    animate: true,
    slide: function(x,y,z) {
        var x = $('#slider2').slider('value'),
            y = $('#slider3').slider('value'),
            z = $('#slider4').slider('value')
        $('#xShadowValue').val(x + ' px');
        $('#yShadowValue').val(y + ' px');
        $('#zShadowValue').val(z + ' px');          
        $('#target').css('box-shadow', x + 'px ' + y + 'px ' + z + 'px ' + '#888888');
    }
});

$('#xShadowValue').val($('#slider2').slider('value') + ' px');
$('#yShadowValue').val($('#slider3').slider('value') + ' px');
$('#zShadowValue').val($('#slider4').slider('value') + ' px');

Problem is when i change the first one all is fine. When i change the second one the first one drops or increases a unit same when i change the third occurs for the second one. Furthermore i cannot slide all of them to 0 or 100. A limit appears at 1 and 99 accordingly. Thanx in advance.

Answer 1

The reason for this is that you are using $("#slider").slider("value") to retrieve the value.

This is not mentioned in the documentation from what I could see, but according to a note in this bug ticket, you should use ui.value to get the new value of the slider and the value method to get the old value of the slider. This explains both of your issues.

With that in mind, you have to tweak your code a bit so that you take advantage of ui.value for each slider.

I would change two things:

1. Use data-* attributes to designate which slider corresponds to which axis:

   <div id="slider2" class="slider" data-axis="x"></div>
   <div id="slider3" class="slider" data-axis="y"></div>
   <div id="slider4" class="slider" data-axis="z"></div>
   

2. Update your slide callback to leverage those attributes:

   var boxShadow = {
       x: 0,
       y: 0,
       z: 0
   };
   
   $('#slider2, #slider3, #slider4').slider({
       step: 1,
       animate: true,
       slide: function(event, ui) {
           var axis = $(this).data("axis");
   
           boxShadow[axis] = ui.value;
   
           $('#xShadowValue').val(boxShadow.x + ' px');
           $('#yShadowValue').val(boxShadow.y + ' px');
           $('#zShadowValue').val(boxShadow.z + ' px');            
   
           $('#target').css('box-shadow', boxShadow.x + 'px ' + boxShadow.y + 'px ' + boxShadow.z + 'px ' + '#888888');
       }
   });
   

Basically, keep a simple object that tracks x, y, and z. This object is easily updated using the aforementioned data-* attributes.

Example: http://jsfiddle.net/t3gva/