Jquery slider change to perform a function - javascript

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.

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

vertical slider need to be more customized

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

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.

How to find jQuery DropDownCheckList selected items from an outside function

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

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