UX improvements

This commit is contained in:
space-nuko
2023-05-05 06:11:05 -05:00
parent 9afe6b21a2
commit 267106bed4
5 changed files with 71 additions and 32 deletions

View File

@@ -37,9 +37,22 @@
$nodeValue = option
}
}
let gradient: string = ""
let elem: HTMLDivElement = null;
$: if (elem && node !== null && option !== null && (!$propsChanged || $propsChanged)) {
const slider = elem.querySelector("input[type='range']") as any
//const range_selectors = "[id$='_clone']:is(input[type='range'])";
let spacing = ((slider.step / ( slider.max - slider.min )) * 100.0);
let tsp = 'max(3px, calc('+spacing+'% - 2px))';
let fsp = 'max(4px, calc('+spacing+'% + 0px))';
const style = elem.style;
style.setProperty('--ae-slider-bg-overlay', 'repeating-linear-gradient( 90deg, transparent, transparent '+tsp+', var(--ae-input-border-color) '+tsp+', var(--ae-input-border-color) '+fsp+' )');
}
</script>
<div class="wrapper gradio-slider">
<div class="wrapper gradio-slider" bind:this={elem}>
{#if node !== null && option !== null}
<Range
bind:value={option}