Merge pull request #280 from kobaltedev/develop

changeset: v0.11.2
kobaltedev · Oct 21, 2023 · ba4fc60 · ba4fc60
2 parents 6aaa33f + 677f256
commit ba4fc60
Show file tree

Hide file tree

Showing 11 changed files with 1,094 additions and 18 deletions.
diff --git a/.changeset/mighty-timers-cough.md b/.changeset/mighty-timers-cough.md
@@ -0,0 +1,5 @@
+---
+"@kobalte/core": patch
+---
+
+added `Slider` component
diff --git a/apps/docs/src/VERSIONS.ts b/apps/docs/src/VERSIONS.ts
@@ -14,4 +14,4 @@ export const CORE_VERSIONS = [
 
 export const LATEST_CORE_CHANGELOG_URL = `/docs/changelog/${CORE_VERSIONS[0].replaceAll(".", "-")}`;
 
-export const LATEST_CORE_VERSION_NAME = "v0.11.1";
+export const LATEST_CORE_VERSION_NAME = "v0.11.2";
diff --git a/apps/docs/src/examples/slider.module.css b/apps/docs/src/examples/slider.module.css
@@ -0,0 +1,71 @@
+.SliderRoot {
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  user-select: none;
+  touch-action: none;
+  width: 200px;
+}
+
+.SliderRoot[data-orientation="vertical"] {
+  height: 200px;
+}
+
+.SliderTrack {
+  background-color: hsl(240 6% 90%);
+  position: relative;
+  border-radius: 9999px;
+  height: 8px;
+  width: 100%;
+}
+
+.SliderTrack[data-orientation="vertical"] {
+  width: 8px;
+  height: 100%;
+}
+
+.SliderRange {
+  position: absolute;
+  background-color: hsl(200 98% 39%);
+  border-radius: 9999px;
+  height: 100%;
+}
+
+.SliderRange[data-orientation="vertical"] {
+  width: 100%;
+  height: unset;
+}
+
+.SliderThumb {
+  display: block;
+  width: 16px;
+  height: 16px;
+  background-color: hsl(200 98% 39%);
+  border-radius: 9999px;
+  top: -4px;
+}
+
+.SliderThumb[data-orientation="vertical"] {
+  left: -4px;
+  top: unset;
+}
+
+.SliderThumb:hover {
+  box-shadow: 0 0 0 5px #2a91fe98;
+}
+
+.SliderThumb:focus {
+  outline: none;
+  box-shadow: 0 0 0 5px #2a91fe98;
+}
+
+.SliderLabel {
+  width: 100%;
+  display: flex;
+  justify-content: space-between;
+}
+
+[data-kb-theme="dark"] .SliderTrack {
+  background-color: hsl(240 5% 26%);
+}
diff --git a/apps/docs/src/examples/slider.tsx b/apps/docs/src/examples/slider.tsx
@@ -0,0 +1,164 @@
+import { Slider } from "@kobalte/core";
+import { createSignal } from "solid-js";
+import style from "./slider.module.css";
+
+export function BasicExample() {
+  return (
+    <Slider.Root class={style["SliderRoot"]}>
+      <div class={style["SliderLabel"]}>
+        <Slider.Label>Label</Slider.Label>
+        <Slider.ValueLabel />
+      </div>
+      <Slider.Track class={style["SliderTrack"]}>
+        <Slider.Fill class={style["SliderRange"]} />
+        <Slider.Thumb class={style["SliderThumb"]}>
+          <Slider.Input />
+        </Slider.Thumb>
+      </Slider.Track>
+    </Slider.Root>
+  );
+}
+
+export function MultipleThumbsExample() {
+  return (
+    <Slider.Root class={style["SliderRoot"]} defaultValue={[0, 20]}>
+      <div class={style["SliderLabel"]}>
+        <Slider.Label>Label</Slider.Label>
+        <Slider.ValueLabel />
+      </div>
+      <Slider.Track class={style["SliderTrack"]}>
+        <Slider.Fill class={style["SliderRange"]} />
+        <Slider.Thumb class={style["SliderThumb"]}>
+          <Slider.Input />
+        </Slider.Thumb>
+        <Slider.Thumb class={`${style["SliderThumb"]} ${style["SliderThumb"]}`}>
+          <Slider.Input />
+        </Slider.Thumb>
+      </Slider.Track>
+    </Slider.Root>
+  );
+}
+
+export function StepExample() {
+  return (
+    <div class="flex flex-col space-y-4">
+      <Slider.Root class={style["SliderRoot"]} step={8}>
+        <div class={style["SliderLabel"]}>
+          <Slider.Label>Step size 8</Slider.Label>
+          <Slider.ValueLabel />
+        </div>
+        <Slider.Track class={style["SliderTrack"]}>
+          <Slider.Fill class={style["SliderRange"]} />
+          <Slider.Thumb class={style["SliderThumb"]}>
+            <Slider.Input />
+          </Slider.Thumb>
+        </Slider.Track>
+      </Slider.Root>
+      <Slider.Root class={style["SliderRoot"]} step={10}>
+        <div class={style["SliderLabel"]}>
+          <Slider.Label>Step size 10</Slider.Label>
+          <Slider.ValueLabel />
+        </div>
+        <Slider.Track class={style["SliderTrack"]}>
+          <Slider.Fill class={style["SliderRange"]} />
+          <Slider.Thumb class={style["SliderThumb"]}>
+            <Slider.Input />
+          </Slider.Thumb>
+        </Slider.Track>
+      </Slider.Root>
+      <Slider.Root class={style["SliderRoot"]} step={20}>
+        <div class={style["SliderLabel"]}>
+          <Slider.Label>Step size 20</Slider.Label>
+          <Slider.ValueLabel />
+        </div>
+        <Slider.Track class={style["SliderTrack"]}>
+          <Slider.Fill class={style["SliderRange"]} />
+          <Slider.Thumb class={style["SliderThumb"]}>
+            <Slider.Input />
+          </Slider.Thumb>
+        </Slider.Track>
+      </Slider.Root>
+    </div>
+  );
+}
+
+export function MinStepsBetweenExample() {
+  return (
+    <Slider.Root class={style["SliderRoot"]} defaultValue={[10, 20]} minStepsBetweenThumbs={10}>
+      <div class={style["SliderLabel"]}>
+        <Slider.Label>Label</Slider.Label>
+        <Slider.ValueLabel />
+      </div>
+      <Slider.Track class={style["SliderTrack"]}>
+        <Slider.Fill class={style["SliderRange"]} />
+        <Slider.Thumb class={style["SliderThumb"]}>
+          <Slider.Input />
+        </Slider.Thumb>
+        <Slider.Thumb class={`${style["SliderThumb"]} ${style["SliderThumb"]}`}>
+          <Slider.Input />
+        </Slider.Thumb>
+      </Slider.Track>
+    </Slider.Root>
+  );
+}
+
+export function VerticalSliderExample() {
+  return (
+    <Slider.Root class={style["SliderRoot"]} orientation="vertical">
+      <div class={style["SliderLabel"]}>
+        <Slider.Label>Label</Slider.Label>
+        <Slider.ValueLabel />
+      </div>
+      <Slider.Track class={style["SliderTrack"]}>
+        <Slider.Fill class={style["SliderRange"]} />
+        <Slider.Thumb class={style["SliderThumb"]}>
+          <Slider.Input />
+        </Slider.Thumb>
+      </Slider.Track>
+    </Slider.Root>
+  );
+}
+
+export function CustomValueLabelExample() {
+  return (
+    <Slider.Root
+      class={style["SliderRoot"]}
+      minValue={10}
+      maxValue={2000}
+      defaultValue={[20, 500]}
+      getValueLabel={params => `$${params.values[0]} - $${params.values[1]}`}
+    >
+      <div class={style["SliderLabel"]}>
+        <Slider.Label>Money</Slider.Label>
+        <Slider.ValueLabel />
+      </div>
+      <Slider.Track class={style["SliderTrack"]}>
+        <Slider.Fill class={style["SliderRange"]} />
+        <Slider.Thumb class={style["SliderThumb"]}>
+          <Slider.Input />
+        </Slider.Thumb>
+        <Slider.Thumb class={`${style["SliderThumb"]} ${style["SliderThumb"]}`}>
+          <Slider.Input />
+        </Slider.Thumb>
+      </Slider.Track>
+    </Slider.Root>
+  );
+}
+
+export function ControlledExample() {
+  const [values, setValues] = createSignal<number[]>([40]);
+  return (
+    <Slider.Root class={style["SliderRoot"]} value={values()} onChange={setValues}>
+      <div class={style["SliderLabel"]}>
+        <Slider.Label>Label</Slider.Label>
+        <Slider.ValueLabel />
+      </div>
+      <Slider.Track class={style["SliderTrack"]}>
+        <Slider.Fill class={style["SliderRange"]} />
+        <Slider.Thumb class={style["SliderThumb"]}>
+          <Slider.Input />
+        </Slider.Thumb>
+      </Slider.Track>
+    </Slider.Root>
+  );
+}
diff --git a/apps/docs/src/routes/docs/changelog/0-11-x.mdx b/apps/docs/src/routes/docs/changelog/0-11-x.mdx
@@ -1,5 +1,15 @@
 # v0.11.x
 
+## v0.11.2 (October 21, 2023)
+
+**New features**
+
+- Added `Slider` component.
+
+**Bug fixes**
+
+- [#278](https://github.com/kobaltedev/kobalte/pull/278)
+
 ## v0.11.1 (October 20, 2023)
 
 **New features**

diff --git a/apps/docs/src/routes/docs/core.tsx b/apps/docs/src/routes/docs/core.tsx
@@ -67,7 +67,6 @@ const CORE_NAV_SECTIONS: NavSection[] = [
       {
         title: "Combobox",
         href: "/docs/core/components/combobox",
-        status: "updated",
       },
       {
         title: "Context Menu",
@@ -122,6 +121,11 @@ const CORE_NAV_SECTIONS: NavSection[] = [
         href: "/docs/core/components/skeleton",
         status: "new",
       },
+      {
+        title: "Slider",
+        href: "/docs/core/components/slider",
+        status: "new",
+      },
       {
         title: "Switch",
         href: "/docs/core/components/switch",
Original file line number	Diff line number	Diff line change
Expand Up		@@ -14,4 +14,4 @@ export const CORE_VERSIONS = [

		export const LATEST_CORE_CHANGELOG_URL = `/docs/changelog/${CORE_VERSIONS[0].replaceAll(".", "-")}`;

		export const LATEST_CORE_VERSION_NAME = "v0.11.1";
		export const LATEST_CORE_VERSION_NAME = "v0.11.2";