He convertido este control deslizante de rango doble de javascript en este componente esbelto.
Funciona bien, como puede ver en el REPL esbelto, pero quiero que el control deslizante sea más detallado e incremente solo 0.1 en lugar de 1 . Debería ser fácil, pero no pude encontrar la manera de hacerlo. de ahí la pregunta.
Nota displayValOne = v/100; cambiará el mínimo y el máximo también
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> ‐ </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>La forma en que haces esto en HTML, es decir, usando el atributo de step .
<input type="range" step={increment}>