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.
Related
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 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);
}
});
I created a jquery slider and for some reason or another the slider has been returning values +-1 from the desired value. As of right now, when I click on the timeline it gives me back one value greater than where I actually clicked.
I've been trying to correct the value when "change" is hit but "change" is hit also from dragging the square sliding thing (lack of better term) and when you click animate, which is a custom event.
Is there any other way I can check when the user just clicks on some point on the timeline? Or has anyone had an error similar to this where the slider values are off by 1?
el.slider({
min: 0,
max: 24,
step: 1,
value: 17,
create: function() {
_this.updateSelectorValue(el, true);
},
change: function( event, ui ) {
debugger;
_this.updateSelectorValue(el);
},
start: function( event, ui ) {
_this.updateSelectorValue(el);
},
stop: function( event, ui ) {
_this.updateSelectorValue(el);
},
slide: function( event, ui ) {
_this.showValueInHandle(el, ui);
}
});
updateSelectorValue: function(e, i) {
//debugger;
var init = (typeof i === "undefined") ? false : i;
var value = e.slider("option","value");
e.find(".ui-slider-handle")
.addClass("btn btn-primary")
.text(App.CommonFunctionsController.formatTimeString(value, false));
if (init) {
$('.btn.btn-primary.pm-peak').click();
$('.btn-pm-peak').addClass('focus');
} else {
$('.btn.btn-primary.custom').click();
$('.btn-custom').addClass('focus');
}
this._context.set('currentValue', value);
},
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
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 );
});