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