Reputation: 5019
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:
0
and then 1
.500
and then 499
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
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