Develop Reference

How to change range slider min,max and step values using javascript

I am trying to set the min,max and step values of a slider using Javascript. I know we can set them as range properties in HTML, but I am specifically looking for an option to use javascript. because my range will vary depends upon condition.
HLML:
<input type="range" id="LoanAmntRange" class="LoanAmntRange">
<input type="text" id="LoanAmntText"></input>
Javascript:
$(function() {
$('#LoanAmntText').val($(LoanAmntRange).val());
$('input[type="range"]').on('input change', function() {
$("#LoanAmntRange").slider('value', 50, 80);
$('#LoanAmntText').val($(this).val());
});
});
$('#LoanAmntText').on("change",function(){
var val = $(this).val().replace(/[^\d\+]/g,""); // check only for digits
$('#LoanAmntRange').val(val).trigger("change");
});
I was going through some of the old discussion and and they have mentioned that the values can be adjusted using below options
Adjust min and max:
$("#LoanAmntRange").slider('value', 50, 80);
Adjust step value:
$("#LoanAmntRange").slider("option", "step", 10);
But its not working for me. Is there anyway I can do it ?
Fiddle: https://jsfiddle.net/k7qf58ex/1/

How to set min/max interval and values for jQuery UI slider?

I jave a problem with jQuery UI Slider.
I have a function "Pricer()" and arguments that I give to it:
1)min_price, max_price - interval range ( min_price-------------max_price )
2)start_price, end_price - subinterval ( min price----start_price--------end_price-----max_price )
Code:
function Pricer(min_price, max_price, start_price, end_price) {
$( "#slider_price" ).slider({
range: true,
min: min_price,
step:10,
max: max_price,
values: [start_price, end_price ],
slide: function( event, ui ) {
$('#price1').val(ui.values[0]);
$('#price2').val(ui.values[1]);
}
});
$('#price1').change(function () {
$('#slider_price').slider("values",0, $(this).val());
});
$('#price2').change( function() {
$('#slider_price').slider("values",1,$(this).val());
});
$('#price1').val($('#slider_price').slider("values",0));
$('#price2').val($('#slider_price').slider("values",1));
};
I call this function twice in order:
1) on document.ready event. ( Pricer(4, 536, 4, 536); )
2) when I should set new values to slider. ( Pricer(4, 536, 11, 12) )
And get the wrong interval:
$('#slider_price').slider('values', 0)
and
$('#slider_price').slider('values', 1)
returns to me value '14' and '14'.
I debug it and found that it happend when I set values property in object which I send to slider().
I didn't found open bug reports in jQuery UI slider. May be it is my misunderstanding of jQuery UI slider work?

It has to do with the fact that you set the step to 10. Since your range starts with 4 the next closest value to 11 and 12 is 14.
Slider Widget API doc about step states that:
(Step) Determines the size or amount of each interval or step the slider takes between the min and max. The full specified value range of the slider (max - min) should be evenly divisible by the step.

Multiplication with Jquery Ui Slider

I am trying to build a ui slider similar to the one on this site: http://www.solarcity.com/
I want to be able to show the monthly value and then a yearly value next to it. ( I would assume multiplying the value of the monthly by 12 of course)
Once upon a time I had my slider working properly until I tried to multiply the monthly value by 12.
What did I do wrong?
(Sorry I am totally new to JavaScript)
Here is my Jsfiddle: http://jsfiddle.net/7qDyq/1/
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6/jquery.min.js"></script>
<span class="slider-output" id="monthly_bill">0</span>/month or <span class="slider-output" id="yearly_bill">0</span>/year
<div id="bill_slider">
</div>
$(document).ready(function(){
function update() {
var bill_slider = $('#bill_slider').slider('value');
var yearly_bill = (monthly_bill * 12 )
$("#monthly_bill").text(tasks_time);
$("#monthly_bill").text(tasks_done);
}
$("#bill_slider").slider({
value: 1,
min: 0,
max: 450,
step: 5,
slide: function() {
update();
}
});
});
Eventually after I figure this out I am also wondering how to change the color of the slider and words after the slider hits a certain point. (If then statement?) Not sure how to implement...
Any help on this is greatly appreciated. Thanks!

Most of the issues in your original jsFiddle traced back to bad JS var names; here is how you would achieve the desired effect:
function update() {
var bill_slider = $('#bill_slider').slider('value');
var yearly_bill = (bill_slider * 12)
$("#monthly_bill").text(bill_slider);
$("#yearly_bill").text(yearly_bill);
}
$("#bill_slider").slider({
value: 1,
min: 0,
max: 450,
step: 5,
slide: function () {
update();
}
});
Working jsFiddle, forked from yours: http://jsfiddle.net/6Bprf/5/
If you update your question with a description & example of the color-coding you want to do, we can include that in our answers.

Jquery. Splitting an array and updating controls. (JSFiddle included)

I have the following markup
<div id="slider"></div>
<p id="ID"></p>
<p id="COUNTRY"></p>
<p id="DESC"></p>
and my Jquery script
var Country = ['100~USA~UsaDescr', '101~SPAIN~SpainDescr', '102~ITALY~ItalyDescr'], p=$('#ID');
$('#slider').slider({
max: 10,
min: 0,
slide: function(event, ui){
p.text(Country[ui.value]);
}
});
I would like upon moving the slider...
For the first slider position update the ID control with 100, the COUNTRY control with USA and the DESC with UsaDescr
For the second slider position update the ID control with 101, the COUNTRY control with SPAIN and the DESC with SpainDescr
I know i am doing horrible things here, but hey! This is my Jquery start!
For anyone willing to help here is the JSFiddle

I wouldn't track properties of objects such as an ID, Country_Name and Description in a concatenated string like that, but this should get you started.
http://jsfiddle.net/wUhm7/1/
html
<div id="slider"></div>
<p id="ID"></p>
<p id="COUNTRY"></p>
<p id="DESC"></p>
javascript
var Country = ['100~USA~UsaDescr', '101~SPAIN~SpainDescr', '102~ITALY~ItalyDescr'];
var splitValues = Country[0].split("~");
$('#ID').html(splitValues[0]);
$('#COUNTRY').html(splitValues[1]);
$('#DESC').html(splitValues[2]);
$('#slider').slider({
max: 2,
min: 0,
slide: function(event, ui){
var splitValues = Country[ui.value].split("~");
$('#ID').html(splitValues[0]);
$('#COUNTRY').html(splitValues[1]);
$('#DESC').html(splitValues[2]);
}
});
Also, You will need to either do some checking to see if an array position exists or limit your slider max value to 2 in your example. Or else when you move the slider to 3, the Country[3] doesn't exist.

Set default value for jQuery slider and override when needed

Background: I currently have a working jQuery slider on my website inside my .js file
$( "#slider-range-min" ).slider({
range: "min",
value: 100,
min: 1,
max: 100,
});
I need to be able to override the "Value" from 100 to some other value sometimes. So I tried this:
$( "#slider-range-min" ).slider({
range: "min",
value: _Slider_Value,
min: 1,
max: 100,
});
and defined this on my html page
<script type="text/javascript">
var _Slider_Value = 50;
</script>
which also works! Except then on all the other pages I get a javascript error stating "_Slider_Value is not defined". I'd rather not have to copy & paste the value onto all my pages if I can avoid it... doesnt seem like a "good" way to do it?
Question: is there a better way to do this - so I can have a default value for my slider, but occasionally override it when required?
Edit: Another way of saying it: how do I make my slider default to "100" unless I tell it otherwise in my html page?

define that in a js file which you are including in every page

place a span in your html where you have slider in a div container here is (id="slider-range-min")
<span class="min">100</span>
read this value in your slider function
$( "#slider-range-min" ).slider({
range: "min",
value: $(this).find('.min').text();,
min: 1,
max: 100,
});
wherever u need the value to be update on the page change the span value dynamically if need else it will take the default value eg. 100 here.

if you are trying to minimize variables you can always check
if (_Slider_Value != undefined) {
//your code here
}
or
(_Slider_Value != undefined) ? _Slider_Value : 100;
so your final code can be
$( "#slider-range-min" ).slider({
range: "min",
value: (_Slider_Value != undefined) ? _Slider_Value : 100,
min: 1,
max: 100,
});
that will default to 100 if there is no value in _Slider_Value

You can override options of the slider with this string.
$('#slider-range-min').slider({value: 50});

Declare your variable globally to access it anywhere in web page. here is the tutorial link.
Try to declare variable without var key word to make it global
<script type="text/javascript">
_Slider_Value = 50;
</script>
if this is not working try binding the variable to window object
var myValue;
function setValue()
{
myValue = "test";
}
function getValue()
{
alert(window.myValue); // yup, it's "test"
}
here is the complete explanation, from which i have given example.
hope it works (not practically tried)