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/
Related
I am looking to make the jqueryUI spinner increment by a set of custom values on a list.
For example, 25, 50, 100, 250, 500, 1000
Is this possible?
The closest thing I can get it doing is stepping by a set amount.
Maybe it can be done by manually changing the value on the .spin call?
Any help on this would be great thanks
you can use this code,
var dlist = ['100','250','500', '1000']
$( ".spinner" ).spinner({
min: 0,
max: 3,
create: function(){
$(this).parent().append('<input class="spinner-text" value="'+dlist[$(this).val()]+'">');
},
stop: function(event,ui) {
$(this).siblings('.spinner-text').val(dlist[$(this).val()]);
}
});
Source
Note: if your array contains 4 values, set max as 3. because first value is already set by default.
see the DEMO
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.
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 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.
I would expect the following code to start my slider at '30' in it's range of 0-250, but yet it is not.
$(function() {
$( "#slider" ).slider({
value: 30,
min: 0,
max: 250,
step: 1,
slide: function(event, ui){
$("#edit-varprice").val(ui.value + ".00");
}
});
});
Image : http://gallery.twardnw.com/var/albums/Misc/Screen%20shot%202012-04-03%20at%203.06.59%20PM.png?m=1333490924
Its working fine for me. See jsFiddle Demo.
Perhaps you are missing something else or doing something in other parts of your code, can you post full code?
try removing the value from the options u chose, and adding it later using:
$( "#slider" ).slider( "option", "value", 40 );
Could you lower your max to 50 and see if the slider handle is offset, if so then its working just fine. In the image it looks like its slightly offset. 30/250 is only 12% and may be deceiving.