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.
......
});
});
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.
After spending hours on several tutorial books and online help I am not able to figure out my problem.Here i am trying to store values of UI slider using localstorage object and it is working fine ( i am getting stored value on every page load) but UI slider pointer not moving according to stored value
it shows position as zero(0) on every page load.
Any suggestion would be a great help
Thanks
<script>
$(function() {
$( "#slider-range" ).slider({
min: 0,
max: 100,
step:25,
value:show(),
change: function() {
iremember();
},
stop: function( event, ui ) {
$.post('volume.php', {volume: ui.value}, function(data) {
});
$('#volume').val(ui.value+' %');
}
});
});
function iremember()
{
var dataTosave=document.getElementById("volume").value
localStorage.setItem("intdata",dataTosave)
}
function show()
{
var dataToshow=localStorage.getItem("intdata")
document.getElementById("volume").value=dataToshow
}
</script>
html-----
<div class="def_class" id="slider-range"></div>
<input type="text" id="volume"/>
Your function show() should return a value:
function show() {
var dataToshow=localStorage.getItem("intdata");
document.getElementById("volume").value=dataToshow;
return parseInt(dataToshow);
}
i have a problem with jquery slider value after changing it.
I'm just using normal jquery UI (version 1.10.4) and jquery core 1.7.2
First time after refresh i have a value which i want. But after the change i can't get it. And i need that to have a if statemnet which will change a value of the paragraph.
This is a JQuery code:
$(function() {
$( "#slider" ).slider({
range:"min",
min: 0,
max: 100,
value: 10,
slide: function wynik( event, ui ) {
$( "#price" ).val("$" + ui.value);
}
});
$( "#price" ).val( "$" + $( "#slider" ).slider( "value") );
var val = $('#slider').slider("value");
if ( val >= 20 ) {
$("#priceText").text("first text");
} else {
$("#priceText").text("second text");
}
});
What is wrong here?
I want to change a text in label:
<p>
<input type="text" id="price">
<label id="priceText" for="price">Some text to change</label>
</p>
Input working correctly and show the value all the time in right way. But label doesn't change (only first time after refresh).
I have read a lot of posts on SO before i post this one. For example:
How to get value from jQuery UI slider? or How to get value from input with dynamically changed value by jquery UI slider?
But i can't get it done anyway.
You can try this:
$("#selector").change(function() {
$("#slider-range").slider('values',0,$(this).val());
});
Working Fiddle
Jquery Slider emit a "slidechange" event everytime it change value
Remember, it should be listened on the jQuery element after you've registered the event in the element itself
$( "#slider" ).slider({
change: function( event, ui ) {
// register event here
}
});
$( "#slider" ).on( "slidechange", function( event, ui ) {
// use ui.value to get the current value
} );
Check the official api wiki for all the slider related events
Official Slider Api
Im trying to make multiple jquery sliders that dynamically create a span with the value, but I am getting an instance of the value for each slider.
take a look at the fiddle http://jsfiddle.net/houareau/RvSgj/182/
or
var a = 0;
$(".slider").each(function() {
var slider = this;
$(slider).slider({
value : 5,
min : 1,
max : $(this).data('max'),
step : 1,
slide : function (event, ui) {
a = ui.value;
$(slider).next().find('span.sliderValue').html(ui.value);
}
});
});
Yay, here is the new fiddle!
$(".slider").slider({
min: 0,
max: $(this).data('max'),
step: 1,
create: function (event, ui) {
$(event.target).find('a').append( $('<span />').addClass('sliderValue') )
},
slide: function (event, ui) {
$(ui.handle).find('span.sliderValue').html(ui.value);
}
});
You forgot to post the create function, which is the real issue here, you're appending both spans to both sliders.
$(".slider").each(function () {
$(this).slider({
min: 0,
max: $(this).data('max'),
step: 1,
create: function (event, ui) {
$(event.target).find('a').append($(event.target).next('.sliderValue'));
},
slide: function (event, ui) {
$(ui.handle).find('span.sliderValue').html(ui.value);
}
});
});
FIDDLE
And do not use a global variable to get the values, you can get a sliders value at any time by calling $( ".selector" ).slider( "value" );
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 );
});