When I click on a slider handle there is a noticeable lag or delay before it begins to animate to the value of the range value. This is strange issue because the default settings for a jQuery ui slider works the way I want it to. But I can't find where this delay in the handles position is being set.
I tried removing all the css styling to see if it wasn't an issue with performance but nothing changed.
I also tried setting the slider option animate to false.
$this.slider({
range: true,
min: min,
max: max,
step: step,
values: [ current_min, current_max ],
animate: false,
create : function( event, ui ) {
$this.closest(".cg_slider_wrapper").next().children(".min_value").val(current_min);
$this.closest(".cg_slider_wrapper").next().children(".max_value").val(current_max);
},
slide: function( event, ui ) {
$this.closest(".cg_slider_wrapper").next().children(".min_value").val(ui.values[ 0 ]);
$this.closest(".cg_slider_wrapper").next().children(".max_value").val(ui.values[ 1 ]);
$this.closest(".cg_slider_wrapper").next().children(".amount").html( cg_format_range(template, ui.values[ 0 ], ui.values[ 1 ]) );
},
change: function( event, ui ){
if (event.originalEvent) { // if user changegs it not by code
var value = ui.values[ 0 ] + "," + ui.values[ 1 ];
cg_wcpf_add_parameter(widget, type, key, value);
}
}
});
please check this answer:
Jquery UI Range Slider Lagging Response to mouse movement
it solved my issue, for my case it was css transition set by another style file.
Related
I am trying to create a jquery handle that when you slide it it moves another div inside a container. Following is my js
function handleSliderChange(e, ui)
{
console.log('1');
var maxScroll = $(".content-item").width()*$(".content-item").length - $("#content-scroll").width();
$("#content-scroll").animate({scrollLeft: ui.value * (maxScroll / 100) },1000);
}
function handleSliderSlide(e, ui)
{
console.log('2');
var maxScroll = $(".content-item").width()*$(".content-item").length - $("#content-scroll").width();
$("#content-scroll").animate({scrollLeft: ui.value * (maxScroll / 100) }, 10);
}
$("#content-slider").slider({
animate: true,
slide: handleSliderSlide,
change: handleSliderChange
});
So when I click on the bar both handleSliderChange and handleSliderSlide are called, but when i drag the slider it works fine any solution ? I don't mind cancelling the click function from the slider i only need the drag anyways
I found the solution to that, the trick is to check prior to running the methods for what type of event is triggered. This is how i did it
sliderBar.slider({
start: checkType,
animate: options.animateSpeed,
slide: handleSliderSlide,
step: options.step,
change: handleSliderChange,
});
function checkType(e){
_isSlide = $(e.originalEvent.target).hasClass("ui-slider-handle");
}
I'm fairly javascript and jquery. I'm trying to add a slider to my webpage. It's a basic slider where anyone can select a value between 0-100. I'm not sure how to mark SOME intervals in the middle.
This is the code i have so far
<script>
$(function() {
var temp = 0;
$( "#slider" ).slider({
animate: true,
value:temp,
min: 0,
max: 100,
step: 1,
slide: function( event, ui ) {
$( "#amount" ).val(ui.value );
},
stop: function(event, ui) {
temp = ui.value;
//Do something
}
});
$( "#amount" ).val($( "#slider" ).slider( "value" ) );
});
</script>
It is functioning properly. What i wanna try to do is add interval markers at 0.25,50,75 and 100.
I have gone through a few questions on SO but not sure how to proceed with the implementation. Would appreciate the help.
I tried this implementation: http://jsbin.com/iwime but this is not what i am trying to do as i just want the ticks to appear at those regular intervals but users shold stll be able to select other values.
Thanks
Cheers
I am guessing you want something like this: http://jsbin.com/iwime/116
So, instead of using the number of ticks in the max option of slider, you use whatever max units you want to provide, e.g. 100. Then in refershTicks(), update the algorithm to toggle the class.
Slider settings:
var slider = $("#slider").slider({
...
max: 100, // the only change
...
});
And the refreshTicks() method:
function refreshTicks() {
var s = slider
, lo = s.slider("values", 0), hi = s.slider("values", 1);
var max = s.slider('option', 'max');
s.find(".tick").each(function(i) {
var i = (i + 1) * (max/ticks.length) - (max/ticks.length)/2; // the updated algorithm
var inRange = (i >= lo && i < hi);
$(this)
[(inRange ? 'add' : 'remove') + 'Class']("ui-widget-header")
[(inRange ? 'remove' : 'add') + 'Class']("ui-widget-content");
});
}
Similar to this SO Question : The answer from Bijan might help.
The implementation of jQuery UI slider he suggest may help you to find a solution:
http://www.filamentgroup.com/lab/update_jquery_ui_slider_from_a_select_element_now_with_aria_support/
I am a little bit stuck:
I would like to change the "max" option of a JQueryUI slider while I am inside an event (e.g. change:).
How do I call the "max" option when I am inside an event?
EDIT: My code looks as follows:
$('#slider0').slider({
value: 100,
min: 0,
max: 500,
range: "min",
step: 50,
stop: function( event, ui ) {
var amt_val = (THIS IS THE CURRENT VALUE OF THE SLIDER)
if(amt_val === 400) {
$('#slider0').slider("option", "max", 10);
}
}
});
However, whenever I set the slider equal to 400, the handle and value go to 0, and the handle freezes.
You can change the option like
$( ".selector" ).slider( "option", "max", 7 );
Check the option tab of doc page for jQuery UI Slider
Demo: http://jsfiddle.net/joycse06/WKyYv/
I am trying to implement a jQuery UI slider, where the slider value will be used to update a section of the page via ajax.
I can get the ajax to work, but I am having issues, getting the slider range to stay as the user has left it. Instead as soon as the slider handle is let go it pings back to default values.
Using jQuery 1.7.1, jQuery UI 1.8.16
Code:
$( "#example_slider" ).slider({
range: true,
step: 150,
min: 0,
max: 450,
values: [ 0, 450 ],
stop: function( event, ui ) {
var value1 = ui.values[0];
var value2 = ui.values[1];
$.ajax({
type: "POST",
url: "ajax_file.php",
data: "value1="+value1+"&value2="+value2,
cache: false,
success: function(html){
$("#content_update").html(html);
}
});
}
});
Ah my bad, Javascript initialization was also being called from ajax_file.php, which was why it was resetting the slider values. Removed this, and now works as expected.
Edit: I still have not resolved this issue. If anyone has advice I would appreciate it.
I have a jquery slider with two bars that the user can change to select a price range. Below the slider I display min: $xxx and max: $xxx to show the current price range. Here's the code:
$("#slider-price .slider").slider({
step: 10,
animate: true,
range: true,
min: 0,
max: 500,
values: [range_price[0],range_price[1]],
slide: function() {
range_price = $(this).slider("option", "values");
$("#low-price-label").text("Min: $"+range_price[0]);
$("#high-price-label").text("Max: $"+range_price[1]);
}
});
The slide option looks at what the value of the slider is, and updates the min and max numbers. However, they only change on mouseup, after the user is done sliding the bar. I want the numbers to update as the user is sliding the bars. How do I do this?
I use this in a media player I wrote
slide: function(event, ui) {
$("#amount").text(ui.value);
}
edit: Just re-read your question, you should be able to use 'ui.values' instead of value to return the array , parse it and go from there.
edit2: Try this function instead of the one you have.
slide: function(event,ui) {
range_price = ui.values;
$("#low-price-label").text("Min: $"+range_price[0]);
$("#high-price-label").text("Max: $"+range_price[1]);
}