Click on track to change slider value #55

Open
chrisjhill opened this Issue Jan 4, 2013 · 7 comments

Comments

Projects
None yet
7 participants
@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

This comment has been minimized.

Show comment Hide comment
@rando

rando Jan 8, 2013

Vote for this issue. It will be great possibility.

rando commented Jan 8, 2013

Vote for this issue. It will be great possibility.

@itsanmax

This comment has been minimized.

Show comment Hide comment
@itsanmax

itsanmax Feb 13, 2013

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

Thanks for this great plugin!

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

Thanks for this great plugin!

@MaximOrlovsky

This comment has been minimized.

Show comment Hide comment
@MaximOrlovsky

MaximOrlovsky Feb 19, 2013

vote

vote

@jeremypele

This comment has been minimized.

Show comment Hide comment
@jeremypele

jeremypele Mar 15, 2013

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!

jeremypele commented Mar 15, 2013

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

This comment has been minimized.

Show comment Hide comment
@amyth

amyth Aug 17, 2013

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

amyth commented Aug 17, 2013

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

@haledeng

This comment has been minimized.

Show comment Hide comment
@haledeng

haledeng Apr 20, 2016

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 commented Apr 20, 2016

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

This comment has been minimized.

Show comment Hide comment
@haledeng

haledeng Apr 20, 2016

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)

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)

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment