NoUiSlider - How I can customize my pips label to have string values?

Question

I want my ticks labels to have value ["abc","pqr","xyz"] instead of [1,2,3]. I tried using format option but its helpful to format the numeric value. we are not able to entirely format the label into alphabetic string.

Answer 1

The ‘format‘ option is the way to go. You can provide a function to convert the slider value to a string.

For reference: documentation on tooltips.

format: {
    to: function(value) {
            // Math.round and -1, so 1.00 => 0, 2.00 => 2, etc.
            return ["abc","pqr","xyz"][Math.round(value) - 1];
    },
    from: Number
}

Answer 2

I was working with React-nouislider here (properties of the slider are written as attributes in React, and values are placed inside objects. But other than these differences it is very similar to a pure JS nouislider). Here is the code of my component:

import React from 'react'
import Nouislider from "nouislider-react";
import "nouislider/distribute/nouislider.css";

const range_all_sliders = {
    'min': [ 0, 200 ],     //million
    '20%': [  200, 400 ],
    '40%': [  600, 200 ],
    '60%': [  800, 200],  
    '80%': [  1000, 1000], //billion
    'max': [ 2000]
};


function howRich(value){
    if(value >= 1000 ) return 'Billion'
    else return 'Million'
}

    const Slider = () => (
      <Nouislider   
      start={0}
      range = {range_all_sliders}
      orientation={'vertical'} 
      direction= 'rtl'
      connect={[true, false]} 
      pips= {{
        mode: 'range',
        density: 20,
        format: {                 {/*here*/}
            to: function (value) {
                return '$ '+ value + ' '+ howRich(value);
            },
            from: function (value) {
                return Number(value.replace(',-', ''));
            }
        }
      }}
      />
    );

export default Slider;

The documentation at Nouislider gives this as an example: (This is a pure JS Nouislider, not a React-nouislider):

function filterPips(value, type) {
    if (type === 0) {
        return value < 2000 ? -1 : 0;
    }
    return value % 1000 ? 2 : 1;
}

var pipsSteps = document.getElementById('pips-steps');

noUiSlider.create(pipsSteps, {
    range: range_all_sliders,
    start: 0,
    pips: {
        mode: 'steps',
        density: 3,
        filter: filterPips,
        format: wNumb({
            decimals: 2,
            prefix: '€'
        })
    }
});

But I didn't want to use the wNumb function/library, so I wrote my own 'from' and 'to' functions, which is allowed.

Note regarding my code: keep the 'from' part as is, I found it somewhere, it just extracts the value and supplies it to the 'to' part which will then customize it (that's the one you want to edit, just the 'to' part).