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?

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?

• javascript
• jquery

• 1 define that in a js file which you are including in every page – Satya Commented May 16, 2012 at 8:44
• thanks Satya - that worked - post it as an answer so I can accept it for you – Laurence Commented May 16, 2012 at 9:00
• posted :) glad that I could help – Satya Commented May 16, 2012 at 9:16

5 Answers 5

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 plete explanation, from which i have given example.

hope it works (not practically tried)