Below is my slider code :
$("#slider").slider({
value: 100,
min: 0,
max: 500,
step: 50,
slide: function (event, ui) {
$("#slider-value").html(ui.value);
}
});
$("#slider-value").html($('#slider').slider('value'));
Is there any way to make the same slider smoother without any other tools using ?
Fiddle Link
See the step property, you can decrease it based on your needs to make it smoother.
Related
Need help on how to use this script to show images instead of values. I need 5 images to be shown when user drag handle. Like slideshow. Here is the slider code
http://jqueryui.com/slider/#steps
Also need to make fade effect on image swap.
This is what i got so far:
$("#slider").slider({
animate: true,
min: 0,
max: 500,
step: 100,
slide: function(event, ui) {
if (ui.value == 100) {
$('#green').hide();
};
if (ui.value == 200) {
$('#green').hide();
$('#red').show();
};
if (ui.value == 400) {
$('#red').hide();
$('#blue').show();
};
$("#hour").text(ui.value);
} });
http://jsfiddle.net/LGMHP/182/
Help would be greatly appreciates.
Jquery offers a fadein fadeout that could easily let you do what you need. It's the equivalent of show and hide, but with a fade. http://api.jquery.com/fadein/
You can set animation duration and add a function on complete. So instead of the show and hide you have, you can do something like:
$('#green').hide('fast', function(){$('#red').show('slow');});
That said, you'll have a problem handling sliding from right to left. To handle all cases, maybe you should use classes. And to push a bit further and simplify, you could work with attributes. Like this:
$("#slider").slider({
animate: true,
min: 0,
max: 500,
step: 100,
slide: function(event, ui) {
$('.showing').fadeOut(function(){$('[data-value='+ui.value+']').fadeIn().addClass('showing');}).removeClass('showing');
$("#hour").text(ui.value);
}
});
see jsfiddle: http://jsfiddle.net/m67Lz3u7/
I have the next jsfiddle:
https://jsfiddle.net/alonshmiel/vxz7fnvk/1/
There is a slider with an ellipse that contains arrows.
I want to write a function that shows a popup with the value of the ellipse when the user changes the value.
BUT: There are two options to scroll it:
1) When you click on a certain value, a popup with the value will be shown on the screen.
2) When you click on the ellipse and move it to the left or right, and then stop clicking on the ellipse (in other words, stop scrolling it), a popup with the value will be shown on the screen with the value.
$("#slider").slider({
value:30,
min: 0,
max: 100,
step: 10,
slide: function( event, ui ) {
$( "#slider a" ).html("<span class='Triangles'>◀▶</span>");
$( "#slider-value" ).html(ui.value);
}
});
Any help appreciated!
You want to bind to the stop event. It will fire when the user stops dragging or when the click at a different point on the slider.
This is your updated code:
$("#slider").slider({
value: 30,
min: 0,
max: 100,
step: 10,
slide: function (event, ui) {
$("#slider a").html("<span class='Triangles'>◀▶</span>");
$("#slider-value").html(ui.value);
},
stop: function (event, ui) {
alert(ui.value);
}
});
Working Fiddle: https://jsfiddle.net/vxz7fnvk/3/
At the moment I have a slider and an small input text box which updates based on where you scroll on it.
Here is the javascript:
$("#slider").slider({
value: 500,
min: 0,
max: 1000,
step: 50,
slide: function(event, ui) {
$("#budget").val(ui.value);
},
change: function(event, ui) {}
});
$("#budget").val($("#slider").slider("value"));
And here is the html/css:
<input type="text" id="budget" style="width:50px;text-align:center"/>
<div id="slider"></div>
However it looks a bit odd having the small text box with the figure just at the top of the slider, so I would like it to update its horizontal position so it is above the handle of the slider (.ui-slider-handle) if possible - like a sort of tooltip.
I'm not sure if you need the input field or just a way to display the text, but you can show a tooltip like this jsFiddle example.
jQuery
var tooltip = $('<div id="tooltip" />').css({
position: 'absolute',
top: -25,
left: -10
}).hide();
$("#slider").slider({
value: 500,
min: 0,
max: 1000,
step: 50,
slide: function(event, ui) {
tooltip.text(ui.value);
},
change: function(event, ui) {}
}).find(".ui-slider-handle").append(tooltip).hover(function() {
tooltip.show()
}, function() {
tooltip.hide()
})
I'm new to jquery and javascript, but I am looking to do what I think should be a relatively simple task. I want to use the UI Slider widget to control certain actions. Get to value 100, show an image. Get to value 200, destroy the previous image, play a new animation (or show an image). This is what I have written so far: http://jsfiddle.net/LGMHP/14/
Am I going about this completely the wrong way?
Looks like you were missing some dollar signs in front of your jQuery variables. Try:
$("#slider").slider({
animate: true,
min: 0,
max: 500,
step: 100,
slide: function(event, ui) {
if (ui.value == 100) {
$('#green').hide();
};
if (ui.value == 200) {
$('#green').hide();
$('#red').show();
};
$("#hour").text(ui.value);
}
});
jsFiddle example.
jQuery 1.3.2 / jQueryUI 1.7 / Slider
$("#slider").slider({
range: "min",
min: 0,
max: 40,
value: 0,
slide: function(event, ui) {
CalculateOrder(event, ui);
}
});
it starts off just fine, but after I move the slider I can't get it back to 0, ui.Value is 1 when i slide it all the way to the left.
I've tried setting
min:-1
this sets the ui.Value to -1 when i slide it to -1, but when I'm at 0 the ui.Value is still 1.
Any ideas?
What you want is to get the value when the slider has stop, not during the slide. From my experience, the slide event will get you the previous position of the slider. Stop will give you the value of the slider where the user move it to.
$("#slider").slider({
range: 'min',
min: 0,
max: 40,
value: 1,
step: 10,
slide : function(event, ui){
console.log("previous value:"+ $(this).slider('option', 'value'));
},
stop: function(event, ui){
console.log("Current value:"+ $(this).slider('option', 'value'));
}
});