nouislider

Can I start a non-step section at a specific value in noUiSlider?


Pardon my janky drawing, but I'm looking for a slider like this:

enter image description here

The handle should step in increments of 1 from 1 to 7, but from 7 to 7.7 it should not step and allow for fluid movement to pick a floating number

From my understanding the only way to acheive this is with a range, and ranges only accept percentages. So I think I could do something like this:

const max = 7.7
const flooredMax = Math.floor(max)
const flooredMaxPercentageStr = flooredMax / max * 100 + "%"

var range = {
  min: [0, 1],
  [flooredMaxPercentageStr]: flooredMax,
  max
}

I think this works, but it's a bit weird. It will produce a key like "90.9090909090909%", I'm not sure if this doesn't have edge cases and is precise enough. Wondering if there is a more proper way to do this


Solution

  • Your approach is valid. The key having many decimals will not causes issues for the slider. There won't be enough pixels to represent that many different slider states, so you could round flooredMaxPercentageStr to any smaller number of decimals without affecting slider precision.