Place for beginners to ask dumb questions about using noUiSlider?

[chrisjdixon]

I'm new to HTML / CSS / JS and there are many basic things I don't understand. I can't figure out how to replicate basic things shown in the documentation, probably because I'm oblivious to basic things that noUiSlider depends on and assumes knowledge of. I've been unsuccessful in finding somewhere to ask dumb questions so I'm hoping someone here could please point me in the right direction. I'd ask on SO but I'd they'd say that's a stupid question and my post would be removed. I feel like an idiot.

Is there some kind of forum where super dumb questions such as these would not be unwelcome?

• What are all these files other than noUiSlider.css and noUiSlider.js for in the .zip?
• Why can't I reproduce the code from this example when following the installation instructions from this SO answer?

Also, I know this is Github and this is a place for people who know what they're doing to discuss real issues but I couldn't find anywhere else to ask. Hope asking this here is alright.

[leongersen]

No problem, feel free to ask.

• The zip file is generated by Github when I create a release, and it simply contains all files in the repository (so it includes all other files used to build noUiSlider).
• As for the example you are trying to reproduce, you haven't provided the code you are using, but the first thing to check is that the id of the html element for your slider matches. The one in the example is different than the explainer on Stack overflow.

[chrisjdixon]

OK, cool. You sure it's alright to ask here? I don't want to clog things up with others and these are super dumb questions which are probably more related to basic web development than noUiSlider.

• What's the relevance of all these other files in the repository? I get they're necessary but how? I've since managed to replicate that example by including wNumb.js, nouislider.js, and nouislider.css. Should all of the files in the zip be loaded somehow? Is that what package managers like npm are for?
• How can I refer to the sliders' values? I've been using input boxes so far: <input type="number" ... name="demo_value"> and a get request finds the value from the name (I think...), but how can the different values of the slider be referred to?

Thanks so much for the help! There isn't a discord channel for these kinds of questions, is there?

[leongersen]

What's the relevance of all these other files in the repository? I get they're necessary but how?

These include automated tests, editor settings, the license file, package manager configurations, etc.

Should all of the files in the zip be loaded somehow?

No, you only need nouislider.js, and nouislider.css, or their minified versions.

Is that what package managers like npm are for?

Package managers can help with this; they know to only fetch the files needed. For noUiSlider, these are configured in package.json. The use of a package manager is optional, especially while you're learning the basics.

How can I refer to the sliders' values?

You can get these in JavaScript using the API:

slider.noUiSlider.get();

If you need the values server side, you could set them as the value to an input element, which would go something like this:

sliderFormat.noUiSlider.on('update', function (values, handle) {
    document.getElementById('input-element').value = values[handle];
});

get request finds the value from the name (I think...),

Yes, for a GET request, form values are submitted as query string parameters (the part in URLs after ?) by input name.

There isn't a discord channel for these kinds of questions, is there?

I'm not aware of one.

[chrisjdixon]

Awesome, thank you so much. Your response has perfectly resolved many things and helped me uncover more things I don't understand! It's so simple once you know it!

• is it possible to set the min and max values of the slider to be some string to signify no upper / lower limit, and show numbers like normal in between?
• does the slider require a number to start with? I'm using it with Django and I want starting values to be blank, and have previously been using an input box with starting values of '' (None) which looks like is coming in as start: [, ], which looks like is causing the error "Uncaught TypeError: slider.noUiSlider is undefined". Is there any way to make this work?

Thank you so much for your help. Is there anything I can do to support noUiSlider?

[chrisjdixon]

Partially figured out my first question by finding your answer on a SO thread asking the same, using edit: function ( value ) {return value == MaxValue ? DisplayString: value;}. Is it possible to do this for multiple values at once? I've tried edit: function ( value ) {return value == '5' ? 'max' : value, return value == '0' ? 'min' : value}, and edit: function ( value ) {return value == '5' ? 'max' : value}, edit: function ( value ) {return value == '0' ? 'min' : value} but this made the 1st line inactive and caused a syntax error, respectively.

I don't want to wear out my welcome so if this is entirely a JS issue feel free to tell me to go away!

[leongersen]

is it possible to set the min and max values of the slider to be some string to signify no upper / lower limit, and show numbers like normal in between?

You could use the formatting feature to output strings for certain values, such as the start/end. For a slider with range 0-50, you could do something like:

noUiSlider.create(slider, {
    // ...
    format: {
        to: function (value) {
            var round = Math.round(value);

            if (round === 0) {
                return 'min value';
            }

            if (round === 50) {
                return 'max value';
            }

            return value;
        },
        from: Number
    }
});

does the slider require a number to start with?

Yes, it does. You have several options to initialize the values, such as setting them to the min/max for the slider.

but this made the 1st line inactive and caused a syntax error, respectively.

The syntax used in the example you've linked is a conditional ternary operator. For your use case, you can use if statements like in the example above.

[sandstrom]

@leongersen You could enable discussions on the repo: https://docs.github.com/en/discussions

[chrisjdixon]

Oh, right... that's just a basic if statement and I now see how stupid my question was. I'm tempted to delete it out of shame but I'll leave it up in the hope it'll help someone else someday. It's all working perfectly now thanks to your help! Thank you very much!

I've got one more question: I'm trying to create another slider for dates, but I'm only interested in showing months and years. Looks like I could adapt from this example, adjusting the step, but it looks like steps are defined by multiples of milliseconds step: 7 * 24 * 60 * 60 * 1000, but the number of days vary by calendar month. Suggestions?

[leongersen]

It'd probably be easiest to set the range to the number of months you want to use, and, pull their values from an array (or create them dynamically). Something like this example.

[chrisjdixon]

OK, great. I ended up using your dates example, except not including the date in the value. Works a treat!

One last question: when the slider's values are at min / max values the data is unfiltered, so I want the slider to be greyed out, similar to the sliders on this page, but I don't want the sliders to be disabled. Is there an easy way to set the connect option to false when values are at min / max?

[leongersen]

Is there an easy way to set the connect option to false when values are at min / max?

I saw your question pop up on StackOverflow as well. You could "disable" the connect option by hiding the .noUi-connect element in the logic proposed there.

.noUi-connect {
    display: none;
}

[chrisjdixon]

Oooh, lovely. Even more elegant than changing the color. Thank you!

Amazing how straightforward things are once you know it! You've made such a great package. Thank you for all your help and this great tool you've given the world!

[github-actions[bot]]

This thread has been automatically locked since there has not been any recent activity after it was closed. Please open a new issue for related bugs.