How do I make a range slider fluid?

Question

I have a slider with 3 values and am trying to add a smoothing/fluid effect when pulling the tab from one value to another.

Here is what I thought would work:

HTML

<input type="range" min="1" max="3" value="1" class="slider">

CSS

.slider {
  display: inherit;
}

.slider::-webkit-slider-thumb {
  transition: all ease-in-out 0.05s
}

.slider::-moz-range-thumb {
  transition: all ease-in-out 0.05s
}

https://jsfiddle.net/pcoledesign/5f1k4xLt/6/

Answer 1

what you can do is try to put step attribute to the input element. and use Math.round() to get the value if you only want the values of 1,2,3