How to decimal increment in svelte range slider?

Question

I have converted this javascript double range slider into this svelte component.

It works fine as you can see in the svelte REPL but I want the slider to be more fine-grained and increment by ony 0.1 instead of 1. It should be easy but I could not figure out how to do so. hence the question.

Note displayValOne = v/100; will change the min and max too

let sliderTracStyle = "";
let displayValOne = 0.0;
let displayValTwo = 100.0;
let minGap = 0;
let percent1 = 0;
let percent2 = 100;

let sliderMaxValue = 100.0;
let sliderMinValue = 0.0;
export let v1;
export let v2;

const slideOne = (v) => {
  if (parseInt(v2) - parseInt(v) <= minGap) {
    v1 = parseInt(v2) - minGap;
  }
  displayValOne = v;
  fillColor();
};
const slideTwo = (v) => {
  if (parseInt(v) - parseInt(v1) <= minGap) {
    v2 = parseInt(v1) + minGap;
  }
  displayValTwo = v2;
  fillColor();
};
const fillColor = () => {
  percent1 = (v1 / sliderMaxValue) * 100;
  percent2 = (v2 / sliderMaxValue) * 100;
  sliderTracStyle = `background: linear-gradient(to right, #dadae5 ${percent1}% , #3264fe ${percent1}% , #3264fe ${percent2}%, #dadae5 ${percent2}%) !important;`;
};

<div class="slider-wrapper">
  <div class="values">
    <span>Choose range  </span>
    <span id="range1"> {displayValOne} </span>
    <span> &dash; </span>
    <span id="range2"> {displayValTwo} </span>
  </div>
  <div class="slider-container">
    <div class="slider-track" style={sliderTracStyle} />

    <input type="range" min={sliderMinValue} max={sliderMaxValue} bind:value={v1} id="slider-1" on:input={()=> slideOne(v1)} />
    <input type="range" min={sliderMinValue} max={sliderMaxValue} bind:value={v2} id="slider-2" on:input={()=> slideTwo(v2)} />
  </div>
</div>

Answer 1

The way you do this in HTML, namely by using the the step attribute.

<input type="range" step={increment}>