How to make slider use decimal values

Question

I would like to display a slider with values from 0kg to 1kg, with pips every 100g, and the label should display 'g' and 'kg' respectively:

0 100g 200g 300g 400g 500g 600g 700g 800g 900g 1kg

1. How do I format the label depending on the value?

2. I want the slider to take 30g value for example, and have the thumb appear in the correct position. In the same time, if user drags the thumb, it should snap at 100g.

Answer 1

noUiSlider has a step property. Initialize like this:

noUiSlider.create(container, {
    range: {
        'min': 0,
        'max': 1000,
    },
    step: 100,
    //.... your other items
}