vertical slider need to be more customized - javascript

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

Related

Progress Bar on drag JS

EDIT:I work with JS UI Slider and I want for each year that value to increase with 0,62% Some ideas? How I can do it?
<script> $( function() {
$( "#slider-range-min" ).slider({
range: "min",
value: 37,
min: 1,
max: 100,
slide: function( event, ui ) {
$( "#amount" ).val( "$" + ui.value );
}
});
$( "#amount" ).val( "$" + $( "#slider-range-min" ).slider( "value" ) ); } ); </script>
IMAGE HIER
There is a HTML element called <input type="range">. You can style it with CSS although browser implementations differ greatly.
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/range

How can I add "+" over a certain value with jQuery UI Slider

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.

JQuery slider with attribute for what to control, reusable prototype

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.

Javascript & jquery manipulation

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

Help with Jquery ui.slider

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

Categories

Resources