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);
Related
I use jQuery UI range slider for IE 9 and lower. With it I want to update the font size live.
My problem is that the range slider does not slide correctly. I cant get value 0 after 1. I also cant gate vaule 100 after 99.
function update() {
var Rvalue = $('#range-slider').slider('value');
$("#slidevalue").text(Rvalue);
};
$(function() {
$( "#range-slider" ).slider({
range:false,
min: 0,
max: 100,
value: 20,
slide: function( event, ui ) {
update();
}
});
});
Here is a jsFiddle
Your problem is your update function.
Try like this :
$(function() {
$( "#range-slider" ).slider({
min: 0,
max: 100,
value: 20,
slide: function( event, ui ) {
$( "#slidevalue" ).text( ui.value );
}
});
});
I am using this vertical slider, which works as it should, but I need to change some values dynamically.
https://jqueryui.com/resources/demos/slider/slider-vertical.html
The values I need to change are "min", "max" and "value" in this function:
$(function() {
$( "#slider-vertical" ).slider({
orientation: "vertical",
range: "min",
min: 0,
max: 100,
value: 60,
slide: function( event, ui ) {
$( "#amount" ).val( ui.value );
}
});
$( "#amount" ).val( $( "#slider-vertical" ).slider( "value" ) );
});
The values "min" , "max" and "value" must be set at each page reload, i.e before the user slide the slider up or down. They are generated within PHP codes before the page is shown. They are saved in variables such as $_min; $_max; and $_value;
Now the question is how do I send them to the javascript function and how do I catch them.
In a simple function like the following I put them in the parentesis...
<input type="text" onClick="myVal(<?php echo $_min ?>);">
And then catch them via function name like this:
function myVal(a)
{alert(a) ;
----- do something more ---
}
But now I dont even know the name of the function. Its not javascript, it's jquery
I hope now I am clearer :)
jquery-UI slider has APIs for that. Check this.
$( ".selector" ).slider( "option", "max", 50 );
$( ".selector" ).slider( "option", "min", 10);
$( ".selector" ).slider( "option", "value", 10 );
You should check the documentation before you ask a question,
$( "#slider-vertical" ).slider( "option", "max", 300 );
http://api.jqueryui.com/slider/
To execute the code within php you can echo the statement as such:
<?php
echo "<script> $( '#slider-vertical' ).slider( 'option', 'max', " + $_max + "); </script>";
?>
Your PHP/HTML should look like this:
<div id="slider-vertical"
data-slider-min="<?php echo $_min ?>"
data-slider-max="<?php echo $_max ?>"
data-slider-value="<?php echo $_value ?>"
>
</div>
Your Javascript should look like this:
$(document).ready( function() {
var $slider = $("#slider-vertical"),
min = $slider.data("slider-min"),
max = $slider.data("slider-max"),
value = $slider.data("slider-value");
$slider.slider({
orientation: "vertical",
range: "min",
min: min,
max: max,
value: value,
slide: function( event, ui ) { $("#amount").val( ui.value ); }
});
});
Explanation:
We use PHP to append the variables as html data attributes to a HTML element. We then can access this data with jQuery, and set the values on the slider.
PHP renders the page the page on the server with the data, and then when a user loads it, their browser will tell jQuery to collect the information and create a slider from it.
the jQuery is wrapped in a function which makes sure the Document is ready to be manipulated.
No need for a user to interact with a click/anything :)
I solved the problem like this
min: - document.getElementById("diff").value,
max: document.getElementById("diff").value,
value: 0,
document.getElementById("bild").style.top = ( ui.value );
document.getElementById("klip22").style.top = ( $( "#slider-vertical" ).slider( "value" )
Its working now!
Thanks
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.
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 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" )
});
});