Saving min/max value of noUISlider to variable

Question

boyz I wonder if it's possible to get the min/max value and store them to a variable which I can use later? To be more specific I need a global variable(?) of min/max value. So I can use it out of scope. The second problem is that I need to have access to it, without updating the slider. I mean I want for example console.log the actual value of the slider has without moving the slider at all. Can anyone help? Something like I did here: https://codepen.io/Hatchling/pen/eRaELE But I wanna do it with the slider down below.

 var slider = document.getElementById('slider'); noUiSlider.create(slider, { start: [20, 80], connect: true, range: { 'min': 0, 'max': 100 } }); 

 <link href="https://cdnjs.cloudflare.com/ajax/libs/noUiSlider/8.2.1/nouislider.min.css" rel="stylesheet"/> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/noUiSlider/8.2.1/nouislider.min.js"></script> <div id="slider"> </div> 

Answer 1

I wonder if it's possible to get the min/max value and store them to a variable which I can use later? To be more specific I need a global variable(?) of min/max value. So I can use it out of scope.

I'm not sure how to interpret this question. If you're asking "how to declare a global variable", that's a bit outside the scope of this site--read up on JavaScript scoping rules.

If you're asking, "how to access and/or modify the current values of 'range' after the slider has been created" then you should be able to use the options property for reading, and the updateOptions method for setting.

Note that although the docs do say that the slider.noUiSlider.options property should return a reference to the options object, I am unable to validate that behavior. If this is necessary your use case, then you might need to engage the noUiSlider maintainers directly with an issue or question.

 var slider = document.getElementById('slider'); noUiSlider.create(slider, { start: [20, 80], connect: true, range: { 'min': 0, 'max': 100 } }); $("#getOptionsValue").click(function () { var sliderOptions = slider.noUiSlider.options; console.log("sliderOptions: ", sliderOptions); }); $("#updateOptionsValue").click(function() { slider.noUiSlider.updateOptions({ range: { min: 10, max: 500 } }, false); }); 

 <link href="https://cdnjs.cloudflare.com/ajax/libs/noUiSlider/8.2.1/nouislider.min.css" rel="stylesheet"/> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/noUiSlider/8.2.1/nouislider.min.js"></script> <div id="slider"> </div> <button id="getOptionsValue">Get Slider Options (Broken?)</button> <br/> <button id="updateOptionsValue">Update Range to 10, 500</button> 

The second problem is that I need to have access to it, without updating the slider. I mean I want for example console.log the actual value of the slider has without moving the slider at all.

Does the get method not satisfy that?

 var slider = document.getElementById('slider'); noUiSlider.create(slider, { start: [20, 80], connect: true, range: { 'min': 0, 'max': 100 } }); $("#getSliderValue").click(function () { var sliderValue = slider.noUiSlider.get() console.log("sliderValue: ", sliderValue); }); 

 <link href="https://cdnjs.cloudflare.com/ajax/libs/noUiSlider/8.2.1/nouislider.min.css" rel="stylesheet"/> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/noUiSlider/8.2.1/nouislider.min.js"></script> <div id="slider"> </div> <button id="getSliderValue">Get Slider Value</button>