We Keep Coding

Jquery UI Slider set value dynamically on sliding the slider

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.

Pass a variable to a value attribute in slider()

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.
......
});
});

Change an image based on JQuery UI Slider position

I have an image on a web page, and want to change it based on the position of a slider, I have looked through a few answers on here but nothing quite covers it for the way I need it to work.
So far i have a functioning slider, and an image but i cant get them to talk to each other:
HTML:
<img src="images/flask_image1.png" alt="Isa lab" id="flask" />
Slider HTML:
<div id="slider1">
Script:
<script>
$(function() {
$( "#slider1" ).slider({
min: 0,
max: 4,
step: 1,
change: function(event, ui){
if(ui.value == 1){
$('flask').attr('src','images/flask_image2.png');
}else{
$('flask').attr('src','images/flask_image1.png');
};
}
});
});
</script>
Basically does nothing.
I'm not a JS or JQ user much, so i'm stuck!

Change $('flask') to $('#flask')

Just change $('flask') to $('#flask')
Working Example: http://jsfiddle.net/4WEML/1/

The problem is you mention id with out the hash "#"
Like below
$('flask').attr('src','images/flask_image2.png');
this wont work as because thats a id you should use hash '#' so try like below code
$(function() {
$( "#slider1" ).slider({
min: 0,
max: 4,
step: 1,
change: function(event, ui){
if(ui.value == 1){
$('#flask').attr('src','images/flask_image2.png');
}else{
$('#flask').attr('src','images/flask_image1.png');
};
}
});
});
Hope this helps....

$('flask').attr('src','images/flask_image2.png');
You need to add a # before hand to refer to an element with an ID of flask
if(ui.value == 1){
$('#flask').attr('src','images/flask_image2.png');
}else{
$('#flask').attr('src','images/flask_image1.png');
};

jQuery UI Slider for changing Image with auto slide

I´d like to build a UI Slider to change an Image. So far, I´ve managed that the Image will change manually and automaticly every three Seconds.
I´m not very happy with the code, because when it reaches the max-value and repeats from beginning, it skippes the last value because of the setInterval. Is there an easier and prettier way to solve this?
HTML
<div id="wrapper">
<div class="image">
<img id="image" src="http://fakeimg.pl/350x200/?text=0&font=lobster" />
</div>
<div id="slider"></div>
</div>
Script
$(function () {
$('#slider').slider({
value: 0,
min: 0,
max: 5,
step: 1,
change: function (event, ui) {
var slideruivalue = (ui.value);
image = $('#image');
image.attr('src', 'http://fakeimg.pl/350x200/?text=' + slideruivalue);
if (slideruivalue == $(this).data("slider").options.max) {
$('#slider').slider('value', 0);
}
}
});
$(function AutoSlider() {
setTimeout(function () {
$("#slider").slider("value", $('#slider').slider("value") + 1);
}, 3000);
setTimeout(AutoSlider, 3000);
});
});
jsFiddle Example

In your setTimeout, get the max of your slider, and then calculate the new value with a modulus (operator %) on max+1 :
setInterval(function () {
var value = $('#slider').slider("value");
var max = $('#slider').slider( "option", "max" );
$("#slider").slider("value", (value + 1)% (max+1));
}, 3000);
Then, there is no need to check the value in the change callback :)
You can also use setInterval instead of two setTimeout
http://jsfiddle.net/q5R68/1/

How to get the value of the slider bootstrap?

How to get the values of the slider bootstrap to hidden iputs?
<input type="hidden" name="min_value" id="min_value" value="">
<input type="hidden" name="max_value" id="max_value" value="">
$(function () {
$("#slider-range-s1").slider({
range: true,
min: 0,
max: 500,
value: [0, 500]
});
});

I think it's currently broken.
Documentation states:
Methods
.slider('getValue')
Get the value.
How ever, calling $('#sliderDivId').slider('getValue') returns the jQuery selector rather than the value...
For now you could manually grab it from the data object...
$('#sliderDivId').data('slider').getValue()

fast fix:
$.fn.slider = function (option, val) {
if (typeof option == 'string') {
if (this.length) {
var data = this.eq(0).data('slider');
if (data)
return data[option](val);
return null;
}
}
return this.each(function () {
var $this = $(this),
data = $this.data('slider'),
options = typeof option === 'object' && option;
if (!data) {
$this.data('slider', (data = new Slider(this, $.extend({}, $.fn.slider.defaults, options))));
}
})
};

The problem is, that there is more than 1 element with the same ID (the slider div and the input inside the slider div), in this example $('#sliderDivId'). If you select the input element with JQuery, you can use the slider API.
$('input[id="sliderDivId"]').slider('getValue')

At time of writing it's a bit flaky but you can make it work:
1/ Make sure you specify an empty range starting "value[0]". Unless you do this its internal value field becomes undefined e.g.
$('#setBidDialogSlider').slider({ value: [0], max: max, step: 0.2, formater: function(v) { return v.toFixed(2)+"BTC" } });
2/ Now finally you can catch the value in the event
$('#setBidDialogSlider').slider().on('slide', function(ev) {
$scope.dialog.order_value = ev.value*$scope.dialog.price;
});

I know I'm late but this is still broken but to fix it open up bootstrap-sliders.js and inject these three things:
the very end of the first function: Slider:
this.calculateValue();
right before:return val; in the calculateValue function
grandVal = val;
after the $.fn.slider function:
$.fn.sliderValue = function(){
return grandVal;
};
var grandVal;
Now you can access the value by $('#MySliderId').sliderValue()

you can use this from the built in function
$( "#slider-range-s1" ).slider({
range: true,
min: 0,
max: 500,
value: [ 0, 500 ]
slide: function( event, ui ) {
// u could use this function
$(".min-slider-value").html( "$" + ui.values[ 0 ]);
$(".max-slider-value").html( "$" + ui.values[ 1 ]);
},
change: function(event, ui) {
// or u could use this function
$(".min-slider-value").html( "$" + ui.values[ 0 ]);
$(".max-slider-value").html( "$" + ui.values[ 1 ]);
}
});
and thank you i thought i coud share this with you guys :D