NoUISlider retrieving and populating values from code behind

Starr Duskk
Starr Duskk used Ask the Experts™
on
I am using a NoUISlider in asp.net and want to know how to retrieve the values for the slider. It is a multi-slider, so needs to return the left and right sides.
slider
From what I've determined by reading, I will attach a javascript method to the save button.
btnSave.Attributes.Add("onClick", "SaveSlider();return true;")

Open in new window


Then the javascript will store the values to two hidden elements and I'll use those server side.

Code would look something like this:

    function SaveSlider() {

        var slider = document.getElementById('slider-tooltips');
        var values = slider.noUiSlider.get();

      //  var values = $('#exampleSlider0').noUiSlider('value');

        document.getElementById("hdnSlider1").value = values(0);
        document.getElementById("hdnSlider2").value = values(1);
    }

Open in new window


I read that it retrieves the values as an array.

How do I retrieve and store the values to the hidden fields?

Also, any suggestions for populating the values on page load with existing values?

Anyone have an existing method?

thanks!
Comment
Watch Question

Do more with

Expert Office
EXPERT OFFICE® is a registered trademark of EXPERTS EXCHANGE®
Multitechnician
Top Expert 2014
Commented:
slider.noUiSlider.on('update', function (values, handle) { // locate this line in your current code
		document.getElementById("hdnSlider"  + (handle*1+1)).value =  values[handle]; // add this new line of code

Open in new window


additionaly, you may want to initialize both somewhere (not in the update of course:
document.getElementById("hdnSlider1").value = 0;
document.getElementById("hdnSlider2").value = 100;

Open in new window

Starr DuskkASP.NET VB.NET Developer

Author

Commented:
It appears something in there is wrong. I added the code to the top of my update function and put an alert after the line and it never gets hit. So looking at the console, I get these errors;

Uncaught TypeError: Cannot set property 'value' of null
    at Object.<anonymous> (TeamSearch.aspx:3336)
    at nouislider.min.js?v=19.12.09a:2
    at Array.forEach (<anonymous>)
    at nouislider.min.js?v=19.12.09a:2
    at Array.forEach (<anonymous>)
    at J (nouislider.min.js?v=19.12.09a:2)
    at nouislider.min.js?v=19.12.09a:2
    at Array.forEach (<anonymous>)
    at Object.$ [as on] (nouislider.min.js?v=19.12.09a:2)

Open in new window


My code looks like this:
    slider.noUiSlider.on('update', function (values, handle) {
       
        document.getElementById("hdnSlider" + (handle * 1 + 1)).value = values[handle]; // add this new line of code

Open in new window

leakim971Multitechnician
Top Expert 2014
Commented:
try to check the handle :

slider.noUiSlider.on('update', function (values, handle) {
        var id = "hdnSlider" + (handle * 1 + 1);
        alert(id); // let me know what you get as ID in the alert box       
        document.getElementById(id).value = values[handle];

Open in new window

Starr DuskkASP.NET VB.NET Developer

Author

Commented:
It says hdnSlider1 on page load.

I found the problem after tracking down that even the retrieval of the hidden field value was erroring in an alert.

I had to set the hidden field as static:

<asp:HiddenField ID="hdnSlider2" ClientIDMode="Static" runat="server" />

Open in new window


Not the js at all.

Thanks so much and sorry!
Starr DuskkASP.NET VB.NET Developer

Author

Commented:
Thanks so much!
leakim971Multitechnician
Top Expert 2014
Commented:
you can also do (without the  ClientIDMode="Static") :

var ids = ["<%= hdnSlider1.ClientID %>", "<%= hdnSlider2.ClientID %>" ];
slider.noUiSlider.on('update', function (values, handle) {
        var id = ids[ handle*1 ];
        alert(id); // let me know what you get as ID in the alert box      
        document.getElementById(id).value = values[handle];

Do more with

Expert Office
Submit tech questions to Ask the Experts™ at any time to receive solutions, advice, and new ideas from leading industry professionals.

Start 7-Day Free Trial