Pardon my janky drawing, but I'm looking for a slider like this:
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
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.