31 lines
1012 B
TypeScript
31 lines
1012 B
TypeScript
import type { JSX } from "solid-js";
|
|
import { splitProps } from "solid-js";
|
|
import { useSliderContext } from "./slider-context";
|
|
|
|
/** Props for Slider.Range — same as div attributes. */
|
|
export type SliderRangeProps = JSX.HTMLAttributes<HTMLDivElement>;
|
|
|
|
/** The filled portion of the slider track representing the current value. */
|
|
export function SliderRange(props: SliderRangeProps): JSX.Element {
|
|
const [local, rest] = splitProps(props, ["style"]);
|
|
const ctx = useSliderContext();
|
|
|
|
const percentage = () => {
|
|
const range = ctx.max() - ctx.min();
|
|
if (range === 0) return 0;
|
|
return ((ctx.value() - ctx.min()) / range) * 100;
|
|
};
|
|
|
|
const computedStyle = () =>
|
|
ctx.orientation() === "horizontal"
|
|
? { width: `${percentage()}%` }
|
|
: { height: `${percentage()}%` };
|
|
|
|
const mergedStyle = () => ({
|
|
...(typeof local.style === "object" ? local.style : {}),
|
|
...computedStyle(),
|
|
});
|
|
|
|
return <div style={mergedStyle()} data-orientation={ctx.orientation()} {...rest} />;
|
|
}
|