I couldn't find a solution to this problem I'm having with the default jQuery slider and outputting the current value:
It seems like the value is the one from the "previous" step.
With a min value of 0, a max value of 10 and step of 0.25 the most left position displays a value of 0.25 and the most right 9.75 - which is simply wrong.
Does anyone know why this is or how to fix it?
HTML:
<div id="slider"></div>
JavaScript:
$('#slider').slider({
min: 0,
max: 10,
value: 2.5,
step: 0.25
});
$('#slider').on('slide', function( event, ui ) {
var value = $('#slider').slider('option','value');
console.log(value);
});
Any help is much appreciated.
You just need to use ui.value to get the value of the slider:
$('#slider').on('slide', function( event, ui ) {
console.log(ui.value);
});
If you want to see just the value where it stops, and not every value that the slider passes by, use the stop event:
$('#slider').on('slidestop', function( event, ui ) {
console.log(ui.value);
});
See http://api.jqueryui.com/slider/#event-stop
Got it!
the "slide" event needs to be called in the slide function:
$('#slider').slider({
min: 0,
max: 10,
value: 2.5,
step: 0.25,
slide: function( event, ui ) {
value = ui.value;
console.log(value);
}
});
Related
I'm using jquery slider , If I slide the slider,In slide function
I will test certain scenario . If the scenario is not satisfied the slider should be positioned back to its original position .
For example :
The current slider value is 1 and the user slide it to value 2, in slide: function (event, ui) function I'm checking the condition if not satisfied the value of the slider should be reverted back to value 1 .
So that I have used the code in else part
$("#slider").slider({ value: parseFloat(return_slider_value) });
$("#slider").slider('value', 1);
It is not setting back the value 1 still it shows the value 2 in the slider.
My requirement is the value of slider value should be dynamically changed .
var slider_Value = $.trim(data.details.merchant_table_booking_hours);
if (slider_Value == '')
{
slider_Value = 0;
}
var return_slider_value = slider_Value;
$("#slider").slider({
value: slider_Value,
min: 0,
max: 12,
step: 0.5,
slide: function (event, ui)
{
var selected_button_count = 0;
$(".time_slot_buttons").each(function ()
{
if(this.attr('selected-id')==0)
{
selected_button_count = parseInt(selected_button_count)+1;
}
});
if (selected_button_count>0)
{
if (parseFloat(ui.value) != 0)
{
$("#slider-value").val(ui.value);
$("#show-slider-hrs").html(ui.value + " hrs ");
} else
{
$("#slider-value").val('');
$("#show-slider-hrs").html('');
}
}
else
{
alert("Please Select a Floor And Timing Buttons" + return_slider_value);
$("#slider-value").val(return_slider_value);
$("#show-slider-hrs").html(return_slider_value + " hrs ");
$("#slider").slider({ value: parseFloat(return_slider_value) });
$("#slider").slider('value', 1);
}
}
})
Thanks in advance .
As you will see from the API documentation on jQuery UI Slider (http://api.jqueryui.com/slider/), the slider can be read and set the following way, after initialization:
// Getter
var value = $( ".selector" ).slider( "option", "value" );
// Setter
$( ".selector" ).slider( "option", "value", 10 );
EDIT:
The answer might possibly depend on the value that you return to the slide event.
Consider this code.
$(function() {
$("#slider").slider({
value: 1,
min: 0,
max: 12,
step: 0.5,
slide: function(event, ui) {
//Evaluate condition
var condition = false; //or true
if (!condition)
return false; //Canceling the event will prevent the handle from moving and the handle will continue to have its previous value.
else
return true;
}
});
});
Full example here.
Canceling the slide event will prevent the handle from moving and the handle will continue to have its previous value.
I used jQuery-ui plugin and jquery.ui.touch-punch to realize drag slider event on mobile device. I closed click event, and I want only when I drag the handle, it works. Everhthing works fine, except when I touch the handle first(don't touchmove, just touchstart) it moves each time, and I don't know why, hope someone can elaborate it for me. Thanks for advance^ ^
$('#head_slider').slider({
orientation: "vertical",
range: "min",
max: 10,
value: 5,
step: 1,
change: function( event, ui ) {
var value = $('#head_slider').slider( "option", "value" );
$('#adj_head').animate({
top: (-70 - value*10)+'px'
});
},
slide: function( event, ui ) {
var value = $('#head_slider').slider( "option", "value" );
}
})
I have a slider and the result (numbers) is displayed in the div with id #output.
So I want to pass this variable also to an input field with id #sites, but I'm stucking. How I can change the value attribute with .val()?
Here is the code
$(document).ready(function() {
$( function() {
var out = $('#output');
$( "#slider" ).slider({
min: 1,
max: 50,
slide: function(evt, ui) {
out.html(ui.value);
}
});
$("#sites").val(out);
} );
});
Firstly note that you only need one document.ready handler. To fix your actual issue, place the code that sets the value of #sites within the slide handler. At the moment you only set the value on load of the page before the user has interacted with the control Try this:
$(function() {
var $out = $('#output');
$("#slider" ).slider({
min: 1,
max: 50,
slide: function(evt, ui) {
$out.html(ui.value);
$("#sites").val(ui.value);
}
});
});
try $("#sites").val(out.text());
You have to do this in the slide callback:
slide: function(evt, ui) {
out.html(ui.value);
$("#sites").val(ui.value);
}
Because slide event happens when user interacts with the slider and you are trying to set the value outside at document ready block. At this point of time the value is at slider's defaults value.
$(document).ready(function() { // this is as same as
$( function() { // this one. extra doc ready block is not needed.
......
});
});
Function not triggered when moving slider to fast. I'm calling function using "slide" with Jquery UI slider. Is there a way to force it to call the function on each step? Here's the code:
var last = currentZoom;
$( "#slider-vertical" ).slider({
orientation: "vertical",
range: "min",
min: 0.2,
max: 1.3,
value: currentZoom,
step: 0.1,
slide: function( event, ui ) {
if (ui.value > last) {
zoomIn();
}else{
zoomOut();
}
console.log($( "#slider-vertical" ).slider('value'));
last = ui.value;
}
});
So just to recap, while sliding it to fast it doesnt recognize the slide and it leads to it on skipping steps resulting in inaccurate values.
Thanks
I am building a generator and I am using the arctext.js plugin. (http://tympanus.net/Development/Arctext/)
Here is my problem. I have an input field where people can type any text they want. After that there are sliders for font-size, letter spacing, and text arc.
the arctext.js works great on text that is there when the page loads, but not on text inputed.
Here is my code for the text that is input
/* top */
$(document).on('keyup', '#bead-top-text', function(e) {
$('#bTop').html($(this).val().replace(/\n/g,'<br/>'));
});
$(document).on('change', '#bead-top-font', function(e) {
$('#bTop').css({'font-family': ''+$(this).val()+'', 'font-weight': 'normal'});
});
$("#bead-top-font-size").slider({
range: "min",
value: 28,
min: 10,
max: 100,
slide: function( event, ui ) {
$('#bTop').css({'font-size': ui.value+'px'});
}
});
$("#bead-top-letter-spacing").slider({
range: "min",
value: 0,
min: 0,
max: 100,
slide: function( event, ui ) {
$('#bTop').css({'letter-spacing': ui.value+'px'});
}
});
$("#bead-top-arc").slider({
range: "min",
value: 0,
min: 0,
max: 1000,
slide: function( event, ui ) {
$('#bTop').arctext('set', {
radius : ui.value,
dir : 1,
animation : {
speed : 300
}
});
}
});
I am at a loss. Any ideas on how I can get this working? The generator is at http://www.xbracelets.com/xgen/
I fixed it by using the solution Erik posted here: Why does the changed input field change the element but no longer allows Jquery arc effects
changed this code from this:`
$(document).on('keyup', '#bead-top-text', function(e) {
$('#bTop').html($(this).val().replace(/\n/g,'<br/>'));
});
To this:
$(document).on('keyup', '#bead-top-text', function(e) {
$('#bTop').arctext('destroy');
$('#bTop').html($(this).val().replace(/\n/g,'<br/>'));
$('#bTop').arctext({radius: 1100});
});