Skip to content

Commit

Permalink
Merge pull request #279 from dev-rb/docs/slider
Browse files Browse the repository at this point in the history
docs: add slider
  • Loading branch information
fabien-ml authored Oct 21, 2023
2 parents 24b6642 + 13c89d4 commit 62a0734
Show file tree
Hide file tree
Showing 4 changed files with 1,085 additions and 0 deletions.
73 changes: 73 additions & 0 deletions apps/docs/src/examples/slider.module.css
Original file line number Diff line number Diff line change
@@ -0,0 +1,73 @@
.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: rgba(0, 0, 0, 0.5);
position: relative;
border-radius: 9999px;
height: 8px;
width: 100%;
}

.SliderTrack[data-orientation="vertical"] {
width: 8px;
height: 100%;
}
.SliderRange {
position: absolute;
background-color: white;
border-radius: 9999px;
height: 100%;
}

.SliderRange[data-orientation="vertical"] {
width: 100%;
height: unset;
}
.SliderThumb {
display: block;
width: 16px;
height: 16px;
background-color: #0090ff;
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;
}

.SecondThumb {
background-color: #30a46c;
}

.SecondThumb:hover {
box-shadow: 0 0 0 5px #50fdac5e;
}

.SecondThumb:focus {
box-shadow: 0 0 0 5px #50fdac5e;
}
164 changes: 164 additions & 0 deletions apps/docs/src/examples/slider.tsx
Original file line number Diff line number Diff line change
@@ -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["SecondThumb"]}`}>
<Slider.Input />
</Slider.Thumb>
</Slider.Track>
</Slider.Root>
);
}

export function StepExample() {
return (
<>
<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>
</>
);
}

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["SecondThumb"]}`}>
<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["SecondThumb"]}`}>
<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>
);
}
5 changes: 5 additions & 0 deletions apps/docs/src/routes/docs/core.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -122,6 +122,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",
Expand Down
Loading

0 comments on commit 62a0734

Please sign in to comment.