mats.bosson/PettyUI
1
0
Fork 0
Code Issues Pull Requests Actions 1 Packages Projects Releases Wiki Activity

Fix Slider NaN edge case

Browse Source
This commit is contained in:
Mats Bosson 2026-03-29 08:35:52 +07:00
parent 796ccab838
commit 789f4e0328
2 changed files with 14 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

17
packages/core/src/components/slider/slider-range.tsx
View File

@ -7,15 +7,24 @@ export type SliderRangeProps = JSX.HTMLAttributes<HTMLDivElement>;
/** The filled portion of the slider track representing the current value. */ /** The filled portion of the slider track representing the current value. */
export function SliderRange(props: SliderRangeProps): JSX.Element { export function SliderRange(props: SliderRangeProps): JSX.Element {
const [, rest] = splitProps(props, []); const [local, rest] = splitProps(props, ["style"]);
const ctx = useSliderContext(); const ctx = useSliderContext();
const percentage = () => ((ctx.value() - ctx.min()) / (ctx.max() - ctx.min())) * 100; const percentage = () => {
const range = ctx.max() - ctx.min();
if (range === 0) return 0;
return ((ctx.value() - ctx.min()) / range) * 100;
};
const style = () => const computedStyle = () =>
ctx.orientation() === "horizontal" ctx.orientation() === "horizontal"
? { width: `${percentage()}%` } ? { width: `${percentage()}%` }
: { height: `${percentage()}%` }; : { height: `${percentage()}%` };
return <div style={style()} data-orientation={ctx.orientation()} {...rest} />; const mergedStyle = () => ({
...(typeof local.style === "object" ? local.style : {}),
...computedStyle(),
});
return <div style={mergedStyle()} data-orientation={ctx.orientation()} {...rest} />;
} }

2
packages/core/src/components/slider/slider-thumb.tsx
View File

@ -14,8 +14,8 @@ export function SliderThumb(props: SliderThumbProps): JSX.Element {
const ctx = useSliderContext(); const ctx = useSliderContext();
const handleKeyDown: JSX.EventHandler<HTMLSpanElement, KeyboardEvent> = (e) => { const handleKeyDown: JSX.EventHandler<HTMLSpanElement, KeyboardEvent> = (e) => {
if (typeof local.onKeyDown === "function") local.onKeyDown(e);
if (ctx.disabled()) return; if (ctx.disabled()) return;
if (typeof local.onKeyDown === "function") local.onKeyDown(e);
const current = ctx.value(); const current = ctx.value();
const s = ctx.step(); const s = ctx.step();