How do I assign jQuery slider handle values with their left or right edges instead of their centers

0 votes

I'm playing with jQuery UI, and I've discovered something disappointing about their multi-handle slider implementation.

I've made an example for you here. I've made the handles slightly transparent so you can see what's going on:

https://codepen.io/ophello/pen/BaNaPdp

The first slider has the handles centered normally. When you click and drag them so they collide, they overlap. Gross!

Below that one, I made duplicate slider, except for this one, I've used CSS to adjust the margins of the handle positions so they don't collide, and they butt up right against each other when they meet, just like two physical sliders would! Great!

#mySlider2 .ui-slider-handle:first-child {
  margin-left: -12px !important;
}

#mySlider2 .ui-slider-handle:last-child {
  margin-left: -1px !important;
}

But... the problem is that by messing with the margins of these elements, the cursor drag position is now outside the handle. Try dragging the bottom left slider and you'll see what I mean. When you start to drag it, it jumps to fit the new drag point, which is not in the center of the handle anymore.

I need to somehow get the handle's clickable area to be the handle boundary itself, but have the handle's returned value for the UI slider to correspond to the handle's right edge (or left edge for the other handle). Make sense?

I took a peek at the jquery slider.js and...it's impenetrably complex. Does anyone know if I can hack this to make it work?

Jun 2 in JQuery by Edureka
• 13,600 points
9 views

No answer to this question. Be the first to respond.

Your answer

Your name to display (optional):
Privacy: Your email address will only be used for sending these notifications.

Related Questions In JQuery

0 votes
1 answer

How do I pre-populate a jQuery Datepicker textbox with today's date?

Hello @kartik, You must FIRST call datepicker() > then use ...READ MORE

answered May 29, 2020 in JQuery by Niroj
• 82,720 points
5,152 views
0 votes
1 answer

How to refresh a jQuery UI Slider after setting min or max values?

Hello @kartik, You should try doing something like ...READ MORE

answered May 30, 2020 in JQuery by Niroj
• 82,720 points
2,976 views
0 votes
1 answer

How do I iterate through children elements of a div using jQuery?

Hello @kartik, Use children() and each(), you can optionally pass a ...READ MORE

answered Oct 5, 2020 in JQuery by Niroj
• 82,720 points
2,596 views
0 votes
1 answer

How do I check if file exists in jQuery or pure JavaScript?

Hello @kartik, With jQuery: $.ajax({ url:'http://www.example.com/somefile.ext', ...READ MORE

answered Oct 5, 2020 in JQuery by Niroj
• 82,720 points
3,631 views
0 votes
1 answer

How to distinguish between left and right mouse click with jQuery

Using the mousedown() method: The mousedown() method in ...READ MORE

answered Jun 14 in JQuery by gaurav
• 12,420 points
9 views
0 votes
1 answer
0 votes
1 answer

How can I refresh a page with jQuery?

Hello @kartik, Use location.reload(): $('#something').click(function() { location.reload(); }); The reload() function ...READ MORE

answered Sep 10, 2020 in JQuery by Niroj
• 82,720 points
198 views
0 votes
1 answer

How can I select an element with multiple classes in jQuery?

Hello @kartik, If you want to match only ...READ MORE

answered Sep 10, 2020 in JQuery by Niroj
• 82,720 points
1,209 views
webinar REGISTER FOR FREE WEBINAR X
Send OTP
REGISTER NOW
webinar_success Thank you for registering Join Edureka Meetup community for 100+ Free Webinars each month JOIN MEETUP GROUP