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.
Related
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
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 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.
How to create a numeric slide as below; without using HTML5 and jquery library
Have you tried dhtmlxSlider ? Its a slide bar which uses simple Javascript, and HTML 4.01 strict.
I believe its compatible with most browsers, and free to download from this link here: Download link for dhtmlxSlider
Here is an example of the code to use dhtmlxSlider:
<script type="text/javascript">
var slider1;
function doLoadLiveDemo(){
slider1=new dhtmlxSlider(
"sliderBox1",
260,
"dhx_skyblue");
slider1.setImagePath("codebase/imgs/");
slider1.setStep(50);
slider1.attachEvent(
"onChange",
function(nv){document.getElementById("qual").value=nv;});
slider1.init();
</script>
You can use jQuery UI's Range Slider:
<script>
$(function() {
$( "#slider-range" ).slider({
range: true,
min: 0,
max: 500,
values: [ 75, 300 ],
slide: function( event, ui ) {
$( "#amount" ).val( "$" + ui.values[ 0 ] + " - $" + ui.values[ 1 ] );
}
});
$( "#amount" ).val( "$" + $( "#slider-range" ).slider( "values", 0 ) +
" - $" + $( "#slider-range" ).slider( "values", 1 ) );
});
Check out the demo page here: http://jqueryui.com/demos/slider/range.html