Starr Duskk

asked on 12/10/2019

NoUISlider retrieving and populating values from code behind

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.

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!

ASP.NETJavaScript

Last Comment

leakim971

8/22/2022 - Mon

ASKER CERTIFIED SOLUTION

leakim971

12/10/2019

THIS SOLUTION ONLY AVAILABLE TO MEMBERS.

View this solution by signing up for a free trial.

Members can start a 7-Day free trial and enjoy unlimited access to the platform.

See Pricing Options

Start Free Trial

GET A PERSONALIZED SOLUTION

Ask your own question & get feedback from real experts

Find out why thousands trust the EE community with their toughest problems.

Starr Duskk

12/11/2019

ASKER

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

SOLUTION

leakim971

12/11/2019

THIS SOLUTION ONLY AVAILABLE TO MEMBERS.

View this solution by signing up for a free trial.

Members can start a 7-Day free trial and enjoy unlimited access to the platform.

See Pricing Options

Start Free Trial

GET A PERSONALIZED SOLUTION

Ask your own question & get feedback from real experts

Find out why thousands trust the EE community with their toughest problems.

Starr Duskk

12/12/2019

ASKER

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 Duskk

12/12/2019

ASKER

Thanks so much!

I started with Experts Exchange in 2004 and it's been a mainstay of my professional computing life since. It helped me launch a career as a programmer / Oracle data analyst

William Peck

SOLUTION

leakim971

12/12/2019

THIS SOLUTION ONLY AVAILABLE TO MEMBERS.

View this solution by signing up for a free trial.

Members can start a 7-Day free trial and enjoy unlimited access to the platform.

See Pricing Options

Start Free Trial

⚡ FREE TRIAL OFFER

Try out a week of full access for free.

Find out why thousands trust the EE community with their toughest problems.