Implementing a slider on your application

I recently had the opportunity to work on a project that was going to pull data based on a date range, and decided I wanted to use a slider that pulls two points. This proved to be a little more complicated than I initially intended, so I wanted to provide a a guide for the other noobs out there.

We decided to use the Materialize framework to assist our UI design, and liked their component options available. What we didn’t realize was the slider presented used two additional libraries, so we ended up going with just one — the noUiSlider.

NoUiSlider found at https://refreshless.com/nouislider/

If you have node installed, you can simply run the commands:

npm install nouislider

yarn add nouislider

If not, visit their GitHub and download the files needed in their “dist” folder. You’re looking for the nouislider.js file & the nouislider.css file. You’ll need to add these two files to your project repo, and link them on the appropriate html page.

Once you have these files, you can add the basic JavaScript code to your file and alter to your liking!

Their homepage example gives detailed notes on each option for your slider. This example is placing restrictions on the slider values — only allowing them to be a specific distance to and from one another, and adds a scale to help the use measure the slider distance. You want to check out the “Options” tab in order to see the full range of options, as well as the “Examples” tab to see which format is going to work best for your purposes.

Our project was working with year-ranges, so we needed our slider to have two moving parts to receive back an array of two values. We copied and pasted the code from the closest looking slider available, and altered the code to fit out range and purpose.

var slider = document.getElementById('slider');

First and foremost, don’t forget to name your html ID tag to match the element you’re targeting

var format = {
    to: function(value) {
        return Math.round(value);
    },
    from: function(value) {
        return Math.round(value);
    }
};

The defaults for the sliders give two decimal points on the end of the values. To remove these decimals, we added a format variable that rounds the values to the whole number.

 noUiSlider.create(slider, {
    start: [1900, 2023],
    connect: true,
    tooltips: true,
    step: 1,
    orientation: "horizontal",
    range: {
      min: 1900,
      max: 2023,
    },
    format,
  });

We wanted the page-load slider to default to 1900 and 2023, to give the full range of year options, indicated by the “start” key. Connect :true gives you color between the values, and tooltips show the slider values as a pop up above the knobs.

In order to style the slider how you’d like using CSS, use their given classes to target parts of the slider you’d like to alter. If you want to override their CSS, check out the styling tips page.

Now that you’ve got your slider working and looking how you’d like, time to extract the values and get the input data you need. noUiSlider has an easy function build in to extract the points using noUiSlider.get();

function getSliderValues() {
  yearRangeValue = slider.noUiSlider.get();
  var startYear = yearRangeValue[0];
  var endYear = yearRangeValue[1];
  startDate = `${startYear}-01-01`;
  endDate = `${endYear}-12-31`;
  return [startDate, endDate];

Using the noUiSlider.get(), you’ll receive an array with the slider locations at the moment of the event listener you set. We needed to reformat our years into a date format our API URL was going to read, so we extracted the 0 and 1 value of the array, and reformatted using a ${template literal}.

I get overwhelmed when looking at docs, and tend to gloss over important information before taking a second to actually read the information given. Sometimes it helps to have someone explain it in a simple step-by-step, just to get you slightly familiarized before diving in. I hope this helps get you through the docs with ease!