I am using this implementation of the ui.slider which controls the ui.tabs as found on the Jquery website:
http://jqueryui.com/demos/slider/#tabs
Everything is working fine however when I directly link to a tab, the slider always stays in its initial position (or whatever you stated as the initial value).
Demo can be found here: http://jqueryui.com/demos/slider/tabs.html#tabs-2
Is there any way of setting the slider to the same position as the tab when it is directly linked to?
Thanks very much.
Something like this should do it:
$(function() {
$( "#tabs" ).tabs({
select: function( event, ui ) {
$( "#slider" ).slider( "value", ui.index );
}
});
$( "#slider" ).slider({
min: 0,
max: $( "#tabs" ).tabs( "length" ) - 1,
slide: function( event, ui ) {
$( "#tabs" ).tabs( "select", ui.value );
},
value: $( "#tabs" ).tabs( "option", "selected" )
});
});
Related
I am trying to make a price slider with jQuery UI slider.
What I want to do is add "+" when the handle reaches the max value.
I added if statement but it didn't work.
<script>
$(function() {
$( "#slider-range-min" ).slider({
range: "min",
value: 2,
min: 1,
max: 50,
slide: function( event, ui ) {
$( "#amount").val( ui.value + "K");
if($( "#amount" ).val(ui.value)>50){
$( "#amount" ).val( ui.value + "K+");
}
}
});
$( "#amount" ).val( $( "#slider-range-min" ).slider( "value" ) + "K");
});
If somebody knows how to do this, that would be great.
Thank you!
The slide property should be:
slide: function( event, ui ) {
if(ui.value>=50)
$( "#amount" ).val( ui.value + "K+");
else
$( "#amount").val( ui.value + "K");
}
The problem was that $( "#amount" ).val(ui.value) is used to set the value of #amount, but the value was already being passed in through the ui param. Also, since the maximum value for the slider is 50, then you will never get above it, so you must use >= or even just == would work as well.
In my project i intend to have multiple similar sliders therefore it would be interesting to make them using a prototype:
To set what the sliders control I want to use a "motorLabel". I have tried adding an attribute to the slider below but it does not find the attribute.
Can you please help me change the code to a usable slider prototype.
$(function() {
$('#svgbasics').svg({onLoad: drawOpenSwitch});
//Slider for Last:
$( "#slider" ).slider({
motorLabel: 'm1',
orientation: "horizontal",
range: "min",
min: 1,
max: 200,
value: 50,
change: function( event, ui ) {
$( "#amount" ).val( ui.value );
console.log(this.motorLabel); // RETURNS UNDEFINED
eval(this.motorLabel.motorSetLast(ui.value));
}
}).draggable();
$( "#amount" ).val( $( "#slider" ).slider( "value" ) );
You can pass argument on html instead :
<div id="slider" data-motor-label="m1"></div>
And in your change function :
$(this).data('motor-label');
To get the value.
I am stuck at what I think is a really simple thing, basically I have the following code for a slider.
$( ".slider" ).slider({
animate: true,
range: "min",
value: 0,
min: 0,
max: 255,
step: 1,
//this gets a live reading of the value and prints it on the page
slide: function( event, ui ) {
$( "#slider-result" ).html( ui.value );
},
//this updates the hidden form field so we can submit the data using a form
change: function(event, ui) {
$('#112').attr('value', ui.value);
}
});
All works fine and dandy, the thing I want to be able to do is make the value 0 again, resetting the slider. I have a little bit setup that does it in the physical form element, but I want the visual slider to show nothing as well.
If this is jQuery UI slider, then look at this:
http://api.jqueryui.com/slider/#option-value
// Get or set the value option, after initialization:
// getter
var value = $( ".selector" ).slider( "option", "value" );
// setter
$( ".selector" ).slider( "option", "value", 10 );
You can specifically set the value of the slider
// This would reset the slider
$( ".slider" ).slider( "value", 0);
The following function does kind of what I want in that it retrieves the values of the selected dropdown menu:
$(function() {
$("#s1").dropdownchecklist();
$('#s1').change(function() {
alert($(this).val());
});
});
My problem is I don't want this to occur on Change, I want to get the selected values from inside another function that is being called when my slider moves. So, my question is how can I assign the checked values from #s1.dropdownchecklist to var checkedValuesFromDropdownChecklist?
$(function() {
$( "#slider" ).slider({
change: function(event, ui) {
if (event.originalEvent) {
//manual change
RunThisFunction(ui.value,checkedValuesFromDropdownChecklist);
}
},
orientation: "horizontal",
range: "min",
min: 0,
max: 100,
value: 10,
slide: function( event, ui ) {
$( "#amount" ).val( ui.value );
}
});
$( "#amount" ).val( $( "#slider" ).slider( "value" ) );
$( ".selector" ).on( "slidecreate", function( event, ui ) {
} );
});
RunThisFunction(ui.value, $('#s1').val());
Just use .val to access the current value of the dropdown.
var selectedValue = $('#s1').val();
console.log(selectedValue);
RunThisFunction(ui.value, $('#s1').val());
I am trying to perform a calculation and set an input value when the slider is moved. I can't get it to work, any help much appreciated. please see my code below:
if (modalContentCall[objname].private_use == true) {
$(this).append($('<div>').load('Content_for_injection.htm #private_use',function(){
$('#inputamount').change(function() {
var isinputamount = parseInt($('#inputamount').val());
});
$( "#slider-range-max" ).slider({
range: "max",
min: 0,
max: 100,
value: 0,
slide: function( event, ui ) {
$( "#slideramount" ).val( ui.value );
if (isinputamount > 0) {
$( "#actualamount" ).val( ui.value/100*isinputamount );
}
else $( "#actualamount" ).val(0);
}
});
$( "#slideramount" ).val( $( "#slider-range-max" ).slider( "value" ) );
$( "#actualamount" ).val( $( "#slider-range-max" ).slider( "value" ) );
Most of this code is standard UI code and works fine. I have added:
if (isinputamount > 0) {
$( "#actualamount" ).val( ui.value/100*isinputamount );
}
else $( "#actualamount" ).val(0);
}
and:
$( "#actualamount" ).val( $( "#slider-range-max" ).slider( "value" ) );
I want to take the input added to #inputamount multiply by the slider value (when this is moved) divided by 100 (to get a percentage decimal 1/100) to give a resulting number in #actualamount.
I can't seem to get it to work.
This issue was solved by using a global variable, I changed the 4th line of code in my question from this
var isinputamount = parseInt($('#inputamount').val());
to this
window.isinputamount = parseInt($('#inputamount').val());
It now works fine.