Is there a way to limit the slider options in jQuery UI slider?
I have a slider that is broken up into 5 parts.
However, I only want options 2,3, and 4 available. I don't want the handle to go to 1 or 5.
how do you restrict this?
Thanks!
You can listen to the slide event and test for it's position.
When it's at 1 or 5, you can return false and cancel the event.
This seems to work
$( ".selector" ).slider({
min: 1,
max: 5,
value: 2,
slide: function(event, ui) {
if(ui.value == 1 || ui.value == 5)
return false;
}
});
Have a play here.
You can't directly change setting to do this if you want to keep 1 and 5 on the slider. If you only want 2,3 & 4 you can use:
$( ".selector" ).slider({ min: 2, max: 4 });
If you want to keep 1 and 5 you will need to write an onChange function. Similar to:
$( ".selector" ).slider({
change: function(event, ui) {
this.value == 1? this.value = 2: this.value; //
this.value == 5? this.value = 4: this.value;
}
});
Not sure if that is the right syntax, you will need to check.
Related
I use jQuery UI range slider for IE 9 and lower. With it I want to update the font size live.
My problem is that the range slider does not slide correctly. I cant get value 0 after 1. I also cant gate vaule 100 after 99.
function update() {
var Rvalue = $('#range-slider').slider('value');
$("#slidevalue").text(Rvalue);
};
$(function() {
$( "#range-slider" ).slider({
range:false,
min: 0,
max: 100,
value: 20,
slide: function( event, ui ) {
update();
}
});
});
Here is a jsFiddle
Your problem is your update function.
Try like this :
$(function() {
$( "#range-slider" ).slider({
min: 0,
max: 100,
value: 20,
slide: function( event, ui ) {
$( "#slidevalue" ).text( ui.value );
}
});
});
I've created a JQuery UI slider and using both change and slide events. Problem is when adding the slide event and dragging the slider to 100 the value shows as 0 not 100.
Fiddle here: http://jsfiddle.net/nrNX8/524/
var total;
var s = $("#slider").slider({
value: 0,
min: 0,
max: 500,
step: 100,
change: function(event, ui) {
$('#select').val(s.slider('value'));
},
slide: function(event, ui) {
$('#select').val(s.slider('value'));
},
});
$('#up').click(function() {
s.slider('value', s.slider('value') + s.slider("option", "step"));
$('#select').val(s.slider('value'));
});
$('#down').click(function() {
s.slider('value', s.slider('value') - s.slider("option", "step"));
$('#select').val(s.slider('value'));
});
$('#select').change(function() {
s.slider('value', $(this).val());
});
The problem is that when the slide event is fired, the value hasn't actually changed yet, which means that s.slider('value') is still zero when you set it.
Use the value that is passed to the slide callback rather than the value current set on the slider. In other words, you should change s.slider('value') to ui.value inside of the slide callback:
Updated Example
slide: function( event, ui ) {
$('#select').val(ui.value);
},
Reference: jQuery UI slide( event, ui )
According to the docs
Triggered on every mouse move during slide. The value provided in the
event as ui.value represents the value that the handle will have as a
result of the current movement. Canceling the event will prevent the
handle from moving and the handle will continue to have its previous
value.
value of the slider doesnt change during slide, you can access currently selected value via ui.value:
slide: function( event, ui ) {
$('#select').val(ui.value);
}
Updated fiddle
I am stuck at what I think is a really simple thing, basically I have the following code for a slider.
$( ".slider" ).slider({
animate: true,
range: "min",
value: 0,
min: 0,
max: 255,
step: 1,
//this gets a live reading of the value and prints it on the page
slide: function( event, ui ) {
$( "#slider-result" ).html( ui.value );
},
//this updates the hidden form field so we can submit the data using a form
change: function(event, ui) {
$('#112').attr('value', ui.value);
}
});
All works fine and dandy, the thing I want to be able to do is make the value 0 again, resetting the slider. I have a little bit setup that does it in the physical form element, but I want the visual slider to show nothing as well.
If this is jQuery UI slider, then look at this:
http://api.jqueryui.com/slider/#option-value
// Get or set the value option, after initialization:
// getter
var value = $( ".selector" ).slider( "option", "value" );
// setter
$( ".selector" ).slider( "option", "value", 10 );
You can specifically set the value of the slider
// This would reset the slider
$( ".slider" ).slider( "value", 0);
I have a jQuery UI Slider that has a range between 1-100. I want to change the class of a div for each value between 1-100.
I know there is a more efficient JavaScript method to switch classes and go through the values. Is there a better method other than the else if statement?
Any tips to make this more efficient appreciated.
$( '#slider-container' ).slider({
min: 1,
max: 100,
slide: function( event, ui ) {
if ((ui.value == 2)) {
$( ".number_100" ).toggleClass( 'number_102' );
} else if ((ui.value == 3)) {
$( ".number_100" ).toggleClass( 'number_103' );
}
}
});
or (but not sure how to find/remove last class added?)
<div class="position_100 number_101"></div>
$( '.position_100' ).removeClass().addClass((ui.value<10) ? 'number_10'+ui.value : 'number_1'+ui.value);
It seems a bit long winded, but after checking the other answered it appeared that the toggleClass wasn't sufficient; solely because for every slide we're potentially adding a class, thus resulting in multiple "number classes" on the item, i.e. the class attribute value was: number_101 number_102 number_103. Instead, I'm assuming you're aftering simply the most recent ui.value change?
If that's the case it can be achieved using the data method within jQuery, and by simply remember what the most recent class was that was added, like so:
slide: function(event, ui) {
if (div.data('lastClass')) {
div.removeClass(div.data('lastClass'));
}
var newClass = ui.value < 10 ? 'number_10' + ui.value : 'number_1' + ui.value;
div.data('lastClass', newClass).addClass(newClass);
}
I know it may seem a bit longer winded, but it does mean that we only have a single "number class" after sliding.
jsFiddle
Try this:
slide: function( event, ui ) {
if (ui.value < 10) {
$( ".number_100" ).toggleClass( 'number_10'+ui.value );
} else {
$( ".number_100" ).toggleClass( 'number_1'+ui.value );
}
}
or:
slide: function( event, ui ) {
$(".number_100").toggleClass((ui.value<10) ? 'number_10'+ui.value : 'number_1'+ui.value);
}
Wouldn't:
slide: function( event, ui ) {
$( ".number_100" ).toggleClass( 'number_10'+ui.value );
}
be more efficient? This assumes that your class names correspond to the slider values so that a value of 10 equals a class name of 'number_1010'.
Quick jsFiddle example using three classes.
I am using the jQuery UI slider and trying to show a div when the slider hits a certain value and hide it otherwise. The div is showing/hiding but at unexpected moments. Can anyone spot where I'm going wrong with my syntax? Here's the script:
$(function() {
//vars
var conveyor = $(".content-conveyor", $("#sliderContent")),
item = $(".item", $("#sliderContent"));
//set length of conveyor
conveyor.css("width", item.length * parseInt(item.css("width")));
//config
var sliderOpts = {
max: (item.length * parseInt(item.css("width"))) - parseInt($(".viewer", $("#sliderContent")).css("width")),orientation: "vertical",range: "min",step: 304,
slide: function(e, ui) {
conveyor.css("left", "-" + ui.value + "px");
$("#amount").val('$' + ui.value);
// here's where I'm trying to show and hide a div based on the value of the slider
if ($("#slider").slider("value") == 304) {
$("#test").show();
} else {
$("#test").hide();
}
}
};
//create slider
$("#slider").slider(sliderOpts);
$("#amount").val('$' + $("#slider").slider("value"));
});
I did this for a project recently, but mine was showing a span tag as a warning note to users, the following is the code I used and its works fine:
$("#slider").slider({
animate: true,
min: 0,
max: 10000,
range: true,
slide: function(event, ui) {
$("#amount").val(ui.values[1]);
if (ui.values[1] > '2000') { //2000 is the amount where you want the event to trigger
$('.slider-warning').css('display', 'block');
} else {
$('.slider-warning').css('display', 'none');
}
}
});
so you should be able to just use this, but change the necesary attributes i.e the value and the selectors etc.
Edit - updated answer follows
got it, the ui.values was wrong, find below the corrected code
var sliderOpts = {
max: (item.length * parseInt(item.css("width"))) - parseInt($(".viewer", $("#sliderContent")).css("width")),
orientation: "vertical",
range: "min",
step: 304,
slide: function(event, ui) {
conveyor.css("left", "-" + ui.value + "px");
$("#amount").val('$' + ui.value);
if (ui.value > '200') { //200 is the amount where you want the event to trigger
$('#test').css('display', 'block');
} else {
$('#test').css('display', 'none');
}
}
};
this is taken straight from ur code, also notice:
if (ui.value > '200')
you'll need to change this to how ever you want the event to be triggered.
Hope this helps :)