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

0 votes

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 6 in JQuery by Edureka
• 13,640 points
11 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 6 by Edureka
• 13,640 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,720 points
5,210 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,998 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,614 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,656 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
• 13,460 points
12 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
209 views
0 votes
0 answers
0 votes
1 answer

How can I Validate forms with jquery?

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

answered Jun 1 in JQuery by Edureka
• 13,640 points
17 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