Add repeating increment action to "buttons" at the ends of a jQuery slider. Needs to work on iPhone.

Question

I have a web app that uses a lot of jQuery sliders. All are bound to input elements with the function below. This is working very nicely except on the iPhone. From what I've seen so far in discussions here and elsewhere there are no good solutions currently available to make the sliders work nicely.

As a workaround, I want to bind a repeating action to '-' and '+' imgs I've placed at either end of the sliders. What's the cleanest way to incorporate this into my sliderinit() function so that holding a finger (or mouse) over the img will increment the input element $(inpid) value, the slider label $(sldlblid) and update the slider thumb in real time?

Note that the values are floats and must be constrained to min and max values supplied in the function argument.

function sliderinit(inpid,min,max) {
    var sldid = '#slider_'+inpid; 
    var sldlblid = sldid + "_val"
    inpid = '#'+inpid;
    $(inpid).hide();
    $(sldid).slider(
        {
        min:    min,
        max:    max,
        step:   (max-min)/100.,
        value:  $(inpid).val(),

        stop:   function(event,ui) {
                $(inpid).val(ui.value);
                $(sldlblid).text((ui.value).toFixed(2));
                }
        });
    };        

Thanks, Mike

Answer 1

Since posting the question, I've developed a solution that binds img buttons to the slider action. The code is posted below. It defines custom events, 'incr' and 'decr' on the sliders and arranges for the img buttons to send those events while the mouse is down and inside the button. It's working pretty well in a normal browser.

Sadly, it still doesn't solve the iPhone issue. The img buttons simply don't respond -- presumably because Apple's touchscreen events aren't mapped to normal mouse events. I assume they did this to support the gesture interface. Anyone know how to get around it?

function sliderinit(inpid,min,max) {
    var sldid = '#slider_'+inpid; 
    var sldlblid = sldid + "_val"
    inpid = '#'+inpid;
    $(inpid).hide();
    $(sldid).slider(
        {
        min:    min,
        max:    max,
        step:   (max-min)/100.,
        value:  $(inpid).val(),

        stop:   function(event,ui) {
                $(inpid).val(ui.value);
                $(sldlblid).text((ui.value).toFixed(2));
                }
        });

    // define custom slider events 'incr' and 'decr'
    $(sldid).slider().bind("incr decr",{
        max:max, 
        min:min,
        slid:$(sldid).slider(),
        inpid:inpid,
        labelid:$(sldlblid),
        }, function(e) {
            var d = e.data;
            var v = d.slid.slider("value");
            var sign;
            (e.type == "decr") ? sign = -1.0 : sign = 1.0;
            var vf = parseFloat(v);
            vf += sign * d.slid.slider("option","step");
            if (vf > d.max) vf = d.max;
            else if (vf < d.min) vf = d.min;
            $(d.inpid).val(vf);
            d.slid.slider("value",vf);
            $(d.labelid).text(vf.toFixed(2));
            }
        );

    // Arrange for clicks on + and - images to 
    // trigger custom slider events
    var plus = sldid + "_plus";
    var minus = sldid + "_minus";

    $(plus).mousedown(function(e) {
        $(plus).everyTime(100,"sliderbutton", function(){
            $(sldid).trigger('incr');
            })
        });
    $(plus).bind("mouseup mouseleave",function(e){
            $(plus).stopTime("sliderbutton");
        });

    $(minus).mousedown(function(e) {
        $(minus).everyTime(100,"sliderbutton", function(){
            $(sldid).trigger('decr');
            })
        });
    $(minus).bind("mouseup mouseleave",function(e){
            $(minus).stopTime("sliderbutton");
        });

    };