Click on track to change slider value

[chrisjhill]

Hello, is it possible to click on any part of the slider's track, and the slider value will then update? jQuery UI does this (I know this isn't UI, but heh).

Thank you!

[rando]

Vote for this issue. It will be great possibility.

[itsanmax]

Yes, It will be really great to get this feature and I'm waiting for this.

Thanks for this great plugin!

[MaximOrlovsky]

vote

[jeremypele]

Hey guys,

I was aving this kind of issue and this is what I've quickly did to overcome that:

$(".layout-slider").mouseup(function(e){
    var slide_settings = $("#myslider").slider().settings ;
    var steps = $(this).width() / slide_settings.scale.length;
    var step_to_chose = slide_settings.from + (Math.round(e.offsetX / steps) * slide_settings.step) ;
    $("#SliderClothes").slider("value",step_to_chose);
 });

Basically you catch the click position into the zone and you're ready to go (check your padding zone). It's experimental but if it can help.

Cheers!

[amyth]

Vote, Was actually looking for this feature and after going through the code, checking the Issues list was the first thing I did.

[haledeng]

waiting for it. @jeremypele 's method has an effect on drag event. My method is to cacalate the diff time between mouse down and mouse up event to detect the event is
a drag or click.

    var timeDiff = 0;
    $('.js-jslider-wrap').mousedown(function() {
        timeDiff = +new Date();
    }).mouseup(function(){
        timeDiff = +new Date() - timeDiff;
    });

    $(".js-jslider-wrap").click(function(e){
        if (timeDiff > 500) return; // drag
        // click event,  jeremypele's method go here.
    });

[haledeng]

another problem is that e.offsetX is the relative distance of current mouse positoin and the e.target 's position (not the position of element. As jslider add four element into DOM)