如何在苗条的范围滑块中增加小数？

Question

我已经转换 this javascript double range slider into this svelte 组件。

正如您在 svelte REPL 中看到的那样，它工作正常，但我希望滑块更细粒度并增加 0.1 而不是 1。这应该很容易，但我不知道该怎么做。因此问题。

注意 displayValOne = v/100; 也会更改最小值和最大值

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

您在 HTML 中执行此操作的方式，即使用 step 属性。

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

如何在苗条的范围滑块中增加小数？

How to decimal increment in svelte range slider?

javascript

svelte

svelte-3

rangeslider