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.

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, 2022 in JQuery by Edureka
• 13,690 points
1,417 views

1 answer to this question.

0 votes

This is far from perfect yet it gets you a lot closer to what you were trying to achieve. If we make the ui-slider-handle a width of 0 or maybe even 1, you now can use that as the exact counter point. You can push the handle out with padding in CSS to make it interact-able again.

$(function() {
  $("#mySlider").slider({
    classes: {
      "ui-slider": "collision"
    },
    range: true,
    min: 0,
    step: 1,
    max: 100,
    values: [0, 100],
    slide: function(event, ui) {
      if (ui.values[0] >= ui.values[1]) {
        return false;
      }
      $("#mySliderVal").val(ui.values[0] + " – " + ui.values[1]);
    }
  });

  var sldr = $("#mySlider").slider("widget");
  $(".ui-slider-handle:eq(0)", sldr).css({
    "padding-left": "8px",
    "margin-right": "-2px"
  });
  $(".ui-slider-handle:eq(1)", sldr).css({
    "padding-right": "8px",
    "margin-left": "-2px"
  });

  $("#mySliderVal").val(
    $("#mySlider").slider("values", 0) + " – " + $("#mySlider").slider("values", 1));
});
body {
  font-family: Helvetica, Arial, sans-serif;
  margin: 20px;
  display: flex;
  justify-content: center;
}

#container {
  width: 200px;
}

*:focus {
  outline: none;
  -moz-box-shadow: none;
  -webkit-box-shadow: none;
  box-shadow: none;
}

input,
label {
  font-size: 13px;
}

div.ui-slider.collision {
  margin-top: 10px;
}

div.ui-slider.collision .ui-slider-handle {
  opacity: 0.75;
  width: 0;
}

div.ui-slider.collision .ui-slider-range {
  background: transparent;
}
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<div id="container">
  <input type="text" id="mySliderVal" readonly style="border:0; color:#f6931f; text-align:left;width:75px">
  <div id="mySlider"></div>
</div>
answered Jun 2, 2022 by Edureka
• 13,690 points

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,880 points
12,096 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,880 points
5,402 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,880 points
5,348 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,880 points
6,320 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, 2022 in JQuery by gaurav
• 23,260 points
692 views
0 votes
1 answer

How to get all css properties and events of a html element with jquery or other libraries?

You can get the computed value of ...READ MORE

answered Jun 14, 2022 in JQuery by gaurav
• 23,260 points
1,014 views
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,880 points
2,087 views
0 votes
0 answers
0 votes
1 answer
0 votes
1 answer

How can I Validate forms with jquery?

Then to define rules use simple syntax. ...READ MORE

answered Jun 1, 2022 in JQuery by Edureka
• 13,690 points
476 views
webinar REGISTER FOR FREE WEBINAR X
REGISTER NOW
webinar_success Thank you for registering Join Edureka Meetup community for 100+ Free Webinars each month JOIN MEETUP GROUP