You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
54 lines
1.6 KiB
54 lines
1.6 KiB
<script lang="ts">
|
|
import { ActiveEidos } from '$uix/eidos';
|
|
import * as TimeRangePicker from '$soma/components/time-range-picker';
|
|
import * as Slider from '$soma/components/slider';
|
|
import { getTimeRangePickerVisualContext } from './context.svelte';
|
|
import type { TimeRangePickerSliderProps } from './types';
|
|
|
|
type Props = TimeRangePickerSliderProps & {
|
|
ruler?: boolean;
|
|
};
|
|
|
|
let { children, ruler, type, ...rest }: Props = $props();
|
|
|
|
const eidos = ActiveEidos.require();
|
|
const visual = getTimeRangePickerVisualContext();
|
|
const showRuler = $derived(ruler ?? visual?.getRuler() ?? true);
|
|
const label = $derived(eidos.langs.ts('#?common.time.second|Second'));
|
|
|
|
const tickValues = [0, 15, 30, 45, 59];
|
|
const min = 0;
|
|
const max = 59;
|
|
|
|
function percent(v: number): string {
|
|
const t = (v - min) / (max - min || 1);
|
|
return `${Math.max(0, Math.min(1, t)) * 100}%`;
|
|
}
|
|
</script>
|
|
|
|
<div
|
|
data-time-range-picker-second-slider
|
|
data-endpoint={type}
|
|
class="time-range-picker-slider time-range-picker-second-slider"
|
|
>
|
|
<span class="time-range-picker-slider-label" aria-hidden="true">{label}</span>
|
|
{#if showRuler}
|
|
<div class="time-range-picker-scale time-range-picker-scale-below" aria-hidden="true">
|
|
{#each tickValues as v}
|
|
<span class="time-range-picker-scale-tick" style:left={percent(v)}>
|
|
<span class="time-range-picker-scale-mark"></span>
|
|
<span class="time-range-picker-scale-label">{String(v).padStart(2, '0')}</span>
|
|
</span>
|
|
{/each}
|
|
</div>
|
|
{/if}
|
|
<TimeRangePicker.SecondSlider {type} {...rest}>
|
|
{#if children}
|
|
{@render children?.()}
|
|
{:else}
|
|
<Slider.Range />
|
|
<Slider.Thumb />
|
|
{/if}
|
|
</TimeRangePicker.SecondSlider>
|
|
</div>
|