[ui] slider ticks suck less but still suck

packages/shelter-ui-test/src/App.tsx

@@ -188,14 +188,7 @@ export default function App() {
 
       <h2>Slider</h2>
       <p>value: {slide()}</p>
-      <SU.Slider
-        min={0}
-        max={120}
-        step={5}
-        steps={[0, 20, 40, 60, 80, 100, 120] as any}
-        value={slide()}
-        onInput={setSlide}
-      />
+      <SU.Slider min={0} max={120} step={5} tick={20} value={slide()} onInput={setSlide} />
 
       <h2>Switch</h2>
       <p>on: {toggle() ? "yes" : "no"}</p>

packages/shelter-ui/src/slider.tsx

@@ -1,14 +1,13 @@
 import { Component, JSX } from "solid-js";
-import { css, classes } from "./slider.tsx.scss";
+import { classes, css } from "./slider.tsx.scss";
 import { injectCss } from "./util";
 
 let injectedCss = false;
 
 export const Slider: Component<{
   min: number;
   max: number;
-  // These are the little labelled ticks on the slider
-  steps?: string[];
+  tick?: boolean | number;
   step?: number | "any";
   class?: string;
   style?: JSX.CSSProperties;
@@ -20,6 +19,13 @@ export const Slider: Component<{
     injectCss(css);
   }
 
+  const ticks = () => {
+    if (!props.tick || typeof props.step !== "number") return [];
+
+    const spacing = props.tick === true ? props.step : props.tick;
+    return Object.keys(Array(~~((props.max - props.min) / spacing) + 1).fill(0)).map((v) => parseInt(v) * spacing);
+  };
+
   return (
     <div class={classes.scontainer}>
       <input
@@ -38,7 +44,7 @@ export const Slider: Component<{
         onInput={(e) => props.onInput?.(parseFloat((e.target as HTMLInputElement).value))}
       />
       <div class={classes.sticks}>
-        {props.steps?.map((t) => (
+        {ticks().map((t) => (
           <div class={classes.stick}>
             <span>{t}</span>
             <div class={classes.stickline}></div>