Okay, so a very similar question was asked here
jQuery UI Slider - Value returned from 'slide' event on release is different from 'change' value
But the answer was unsatisfactory in my opinion. Here is my JavaScript code: http://jsfiddle.net/AsDZJ/4/
function slideVal() {
var number = $("#number_slider").slider("value");
$("#number_field").append('Slide: ' + number + '<br/>');
}
function changeVal() {
var number = $("#number_slider").slider("value");
$("#number_field").append('Change: ' + number + '<br/>');
}
$(function() {
$( "#number_slider" ).slider({
min: 1,
max: 10,
change: changeVal,
slide: slideVal
});
$( "#number_slider" ).slider( "value", 5 );
});
The issue is that the slider is reporting different values between when the change handler is called, and when the slide handler is called.
Now, the other question points out that if you declare the function anonymously, you can simply use ui.value, like so:
$( "#number_slider" ).slider({
min: 1,
max: 10,
change: function(event, ui) {
$("#number_field").append('Change: ' + ui.value + '<br/>');
}
});
This does give more consistent results, but also means that if, as in my case, I have a lot of complex logic to perform whenever the event changes, I have to repeat code. In addition, the calculations involve slider values from multiple sliders.
How can I get access to the correct value from an explicitly declared function? Is this behavior in jQuery UI a bug?
Thanks
You can still define global functions with parameters, when you initialize the slider just pass in the function name instead of using an anonymous callbacks
function slideVal(e, ui) {
var number = ui.value;
$("#number_field").append('Slide: ' + number + '<br/>');
}
function changeVal(e, ui) {
var number = ui.value;
$("#number_field").append('Change: ' + number + '<br/>');
}
$(function() {
$( "#number_slider" ).slider({
min: 1,
max: 10,
change: changeVal,
slide: slideVal
});
$( "#number_slider" ).slider( "value", 5 );
});
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 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.
......
});
});
I have a jquery ui slider:
$( "#slider" ).slider({
values: [ 10, 25,45,176 ],
max: 190,
change: function( event, ui ) {
var index = $("#slider span").index(ui.handle);
$( "#index" ).text( "That was handle index #" + index );
}
});
I want to return the index of the changed single handle. But the handle object returns all spans (handles).
How can i do that?
Inside of the change event function, ui.handle is the element that was changed. Therefore, use $(ui.handle).index() to access the index of the element. Note: The index is zero-based.
Example Here
$("#slider").slider({
values: [ 10, 25,45,176 ],
max:190,
change: function( event, ui ) {
var index = $(ui.handle).index();
$("#index").text( "That was handle index #" + index );
}
});
For anyone seeing this after the March 2015 patch that added the handleIndex property to the ui object, if you need the index of the current handle, you can just use, for example:
$("#slider").slider({
values: [10, 25, 45, 176],
max: 190,
change: function(event, ui) {
var index = ui.handleIndex;
$("#index").text("That was handle index #" + index);
}
});
I have a form with random filters and a slider that adjusts the width/height of items.
How can I save the slider value once the form is submitted so that when I go back to the slider, I see the value I left it on?
My attempt:
<input type="text" id="amount" name="slider_id" value="<?php if (isset($_POST['slider_id'])){ echo $_POST['slider_id']; }?>">
<div id="slider"></div>
The Javascript:
$(function() {
$( "#slider" ).slider({
value:$("input[name='slider_id']").val(), min: 80, max: 400, step: 10,
slide: function( event, ui ) {
$( "#amount" ).val( ui.value-70 + "%" );
$('.display').css('width', ui.value + 'px');
}
});
$( "#amount" ).val( $( "#slider" ).slider( "value" ) + "%" );
});
Right now it will show NaN after the form is submitted. All help is much appreciated!
Looks to me that the problem is in php value set.
Just modify the value of the input before calling the slider.
$(function () {
var newVal = $('input').val().replace("%","");
$('input').val(newVal);
$("#slider").slider({
value: $("input[name='slider_id']").val(),
min: 80,
max: 400,
step: 10,
slide: function (event, ui) {
$("#amount").val(ui.value - 70 + "%");
$('.display').css('width', ui.value + 'px');
}
});
$("#amount").val($("#slider").slider("value") + "%");
});
http://jsfiddle.net/joeSaad/hZCDZ/#base
Your problem is here: $("input[name='slider_id']").val()
Debug it and you'll find that it's some form of "nn%", thus, a string.
$.slider requires that value be numeric.
You need to parse it somehow:
value: parseInt($("input[name='slider_id']").val().replace('%', ''), 10)
I have a slider inside my script:
var uniquePrice;
$( "#slider-secondary" ).slider({
range: "min",
value: 0,
min: 0,
max: 50,
slide: function( event, ui ) {
$( "#amount-secondary" ).val( ui.value );
uniquePrice = ui.value * 1500;
}
});
console.log(uniquePrice);
And I need to use the uniquePrice var further in the code, outside of the slider function. And it doesn't work - console.log(uniquePrice); says "undefined".
What am I doing wrong?
P.S. Of course I defined the global variable before the function, sorry for forgetting to include here.
The console.log() is going to be called before that variable is set by that function. The js will:
declare the var
then setup the slider
the immediately call console.log()
So until the slide happens that variable will be undefined
You have to define the variable outside of the function.
var uniquePrice;
$( "#slider-secondary" ).slider({
range: "min",
value: 0,
min: 0,
max: 50,
slide: function( event, ui ) {
$( "#amount-secondary" ).val( ui.value );
uniquePrice = ui.value * 1500;
console.log(uniquePrice);
}
});
if you want the variable outside of the function you can do:
var uniquePrice;
$( "#slider-secondary" ).slider({
range: "min",
value: 0,
min: 0,
max: 50,
slide: function( event, ui ) {
$( "#amount-secondary" ).val( ui.value );
uniquePrice = ui.value * 1500;
doLog();
}
});
function doLog(){
console.log(uniquePrice);
}
edit: added the console.log to the slider function
I think I read somewhere that if you forget to put the 'var' infront of the name of the variable, it gets declared as a global variable. Please confirm or deny this ;)
P.S. What happens if you remove line #1 altogether? What kind of error do you get?