CODEWITHSUNDEEP
javascriptjquerycssjquery-uijquery-ui-slider
Ari
Ari

Reputation: 5019

jquery ui slider weird behavior, slide values goes above minimum and under maximum

I am using jquery ui slider and make it smaller. When I slide it to the minimum, its value is go above the min value and when I slide it to maximum, its value is fall under the max value.

So the case is like this:

What makes that weird behaviors and how to solve it?

--- EDIT: ---

It happens if I use the slide event type binding like this example:

$(".slider").on("slide", function(){
   var value = $(this).slider("value");
   $(this).closest(".item-wrapper").find(".input-text").val(value);
});

Is that a bug?

--- end of edit ---

Here is my codes:

CSS:

.sliderwrapper {
  float: right;
  width: 125px;
  margin: 10px 0 0 0; 
}

#sliderwrap {
  margin: 15px 0 0 0; 
}

.ui-slider-horizontal {
    height: 6px;
    background: none repeat scroll 0 0 #000000;
    border: 1px solid #000000;
}

.ui-slider .ui-slider-handle {
    height: 10px;
    width: 10px;
    background: #f26522;
    border: 1px solid #000000;
    top: -3.5px;
    cursor: pointer;
}

.ui-slider-horizontal .ui-slider-handle {
  margin-left: -2.5px;
}

HTML

<div id="sliderwrap" class="sliderwrapper">
  <div class="slider"></div>
</div>

jQuery

$(".slider").slider({
  value: val,
  min: 0,
  max: 500,
  step: 1
});

Upvotes: 1

Views: 666

Answers (1)

Julien Gr&#233;goire
Julien Gr&#233;goire

Reputation: 17144

The problem is that slide event is triggered only when handle is actually sliding, and at some interval, so that's hard to pinpoint. So especially when your range is high and the slider is small, it'll be triggered on a value before the handle stops and once it stops, the event isn't triggered anymore. To solve this you can add same function on stop. Like this:

$(".slider").slider({
    value: 20,
    min: 0,
    max: 500,
    step: 1,
    slide: function (e, ui) {
        var value = $(this).slider("value");
        $(".input-text").val(value);
    },
    stop: function (e, ui) {
        var value = $(this).slider("value");
        $(".input-text").val(value);
    }
});

https://jsfiddle.net/kj0gsdL4/1/

Upvotes: 2

Related Questions