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> ‐ </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>The way you do this in HTML, namely by using the the step attribute.
<input type="range" step={increment}>