Step size 8
@@ -78,7 +78,7 @@ export function StepExample() {
-
+
);
}
@@ -94,7 +94,7 @@ export function MinStepsBetweenExample() {
-
+
@@ -137,7 +137,7 @@ export function CustomValueLabelExample() {
-
+
diff --git a/apps/docs/src/routes/docs/changelog/0-11-x.mdx b/apps/docs/src/routes/docs/changelog/0-11-x.mdx
index 61a501d1..3e7ca2c1 100644
--- 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
index 1e6571dd..efab4157 100644
--- 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",
diff --git a/apps/docs/src/routes/docs/core/components/slider.mdx b/apps/docs/src/routes/docs/core/components/slider.mdx
index 8d57e5a6..98f1e899 100644
--- a/apps/docs/src/routes/docs/core/components/slider.mdx
+++ b/apps/docs/src/routes/docs/core/components/slider.mdx
@@ -103,7 +103,7 @@ The slider consists of:
}
.SliderTrack {
- background-color: rgba(0, 0, 0, 0.5);
+ background-color: hsl(240 6% 90%);
position: relative;
border-radius: 9999px;
height: 8px;
@@ -112,7 +112,7 @@ The slider consists of:
.SliderRange {
position: absolute;
- background-color: white;
+ background-color: hsl(200 98% 39%);
border-radius: 9999px;
height: 100%;
}
@@ -121,7 +121,7 @@ The slider consists of:
display: block;
width: 16px;
height: 16px;
- background-color: #0090ff;
+ background-color: hsl(200 98% 39%);
border-radius: 9999px;
top: -4px;
}
@@ -177,7 +177,7 @@ The slider consists of:
-
+
@@ -200,7 +200,7 @@ The slider consists of:
}
.SliderTrack {
- background-color: rgba(0, 0, 0, 0.5);
+ background-color: hsl(240 6% 90%);
position: relative;
border-radius: 9999px;
height: 8px;
@@ -209,7 +209,7 @@ The slider consists of:
.SliderRange {
position: absolute;
- background-color: white;
+ background-color: hsl(200 98% 39%);
border-radius: 9999px;
height: 100%;
}
@@ -218,7 +218,7 @@ The slider consists of:
display: block;
width: 16px;
height: 16px;
- background-color: #0090ff;
+ background-color: hsl(200 98% 39%);
border-radius: 9999px;
top: -4px;
}
@@ -237,18 +237,6 @@ The slider consists of:
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;
- }
```
@@ -339,7 +327,7 @@ The slider consists of:
}
.SliderTrack {
- background-color: rgba(0, 0, 0, 0.5);
+ background-color: hsl(240 6% 90%);
position: relative;
border-radius: 9999px;
height: 8px;
@@ -348,7 +336,7 @@ The slider consists of:
.SliderRange {
position: absolute;
- background-color: white;
+ background-color: hsl(200 98% 39%);
border-radius: 9999px;
height: 100%;
}
@@ -357,7 +345,7 @@ The slider consists of:
display: block;
width: 16px;
height: 16px;
- background-color: #0090ff;
+ background-color: hsl(200 98% 39%);
border-radius: 9999px;
top: -4px;
}
@@ -411,7 +399,7 @@ The slider consists of:
-
+
@@ -434,7 +422,7 @@ The slider consists of:
}
.SliderTrack {
- background-color: rgba(0, 0, 0, 0.5);
+ background-color: hsl(240 6% 90%);
position: relative;
border-radius: 9999px;
height: 8px;
@@ -443,7 +431,7 @@ The slider consists of:
.SliderRange {
position: absolute;
- background-color: white;
+ background-color: hsl(200 98% 39%);
border-radius: 9999px;
height: 100%;
}
@@ -452,7 +440,7 @@ The slider consists of:
display: block;
width: 16px;
height: 16px;
- background-color: #0090ff;
+ background-color: hsl(200 98% 39%);
border-radius: 9999px;
top: -4px;
}
@@ -471,18 +459,6 @@ The slider consists of:
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;
- }
```
@@ -538,7 +514,7 @@ The slider consists of:
}
.SliderTrack {
- background-color: rgba(0, 0, 0, 0.5);
+ background-color: hsl(240 6% 90%);
position: relative;
border-radius: 9999px;
width: 8px;
@@ -547,7 +523,7 @@ The slider consists of:
.SliderRange {
position: absolute;
- background-color: white;
+ background-color: hsl(200 98% 39%);
border-radius: 9999px;
width: 100%;
}
@@ -556,7 +532,7 @@ The slider consists of:
display: block;
width: 16px;
height: 16px;
- background-color: #0090ff;
+ background-color: hsl(200 98% 39%);
border-radius: 9999px;
left: -4px;
}
@@ -582,6 +558,7 @@ The slider consists of:
### Custom Value Label
+
@@ -614,7 +591,7 @@ The slider consists of:
-
+
@@ -637,7 +614,7 @@ The slider consists of:
}
.SliderTrack {
- background-color: rgba(0, 0, 0, 0.5);
+ background-color: hsl(240 6% 90%);
position: relative;
border-radius: 9999px;
height: 8px;
@@ -646,7 +623,7 @@ The slider consists of:
.SliderRange {
position: absolute;
- background-color: white;
+ background-color: hsl(200 98% 39%);
border-radius: 9999px;
height: 100%;
}
@@ -655,33 +632,25 @@ The slider consists of:
display: block;
width: 16px;
height: 16px;
- background-color: #0090ff;
+ background-color: hsl(200 98% 39%);
border-radius: 9999px;
top: -4px;
}
+
.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;
- }
```
@@ -689,6 +658,7 @@ The slider consists of:
### Controlled Value
+
@@ -739,7 +709,7 @@ The slider consists of:
}
.SliderTrack {
- background-color: rgba(0, 0, 0, 0.5);
+ background-color: hsl(240 6% 90%);
position: relative;
border-radius: 9999px;
height: 8px;
@@ -748,7 +718,7 @@ The slider consists of:
.SliderRange {
position: absolute;
- background-color: white;
+ background-color: hsl(200 98% 39%);
border-radius: 9999px;
height: 100%;
}
@@ -757,7 +727,7 @@ The slider consists of:
display: block;
width: 16px;
height: 16px;
- background-color: #0090ff;
+ background-color: hsl(200 98% 39%);
border-radius: 9999px;
top: -4px;
}
@@ -785,59 +755,59 @@ The slider consists of:
### Slider.Root
-| Prop | Description |
-| :------- | :--------------------------------------------------------------------------------------------------- |
-| value | `number[]`
The controlled values of the slider. Must be used in conjunction with `onChange`. |
-| defaultValue | `number[]`
The value of the slider when initially rendered. Use when you do not need to control the state of the slider. |
-| onChange | `(value: number[]) => void`
Event handler called when the value changes. |
-| onChangeEnd | `(value: number[]) => void`
Event handler called when the value changes at the end of an interaction. |
-| inverted | `boolean`
Whether the slider is visually inverted. Defaults to false. |
-| minValue | `number`
The minimum slider value. Defaults to 0|
-| maxValue | `number`
The maximum slider value. Defaults to 100|
-| step | `number`
The stepping interval. Defaults to 1|
-| minStepsBetweenThumbs | `number`
The minimum permitted steps between thumbs. Defaults to 0|
-| getValueLabel | `(params: GetValueLabelParams) => string`
A function to get the accessible label text representing the current value in a human-readable format. If not provided, the value label will be read as a percentage of the max value.|
-| orientation | `'horizontal' \| 'vertical'`
The orientation of the slider.|
-| name | `string`
The name of the slider, used when submitting an HTML form.|
-| validationState | `'valid' \| 'invalid'`
Whether the slider should display its "valid" or "invalid" visual styling.|
-| required | `boolean`
Whether the user must check a radio group item before the owning form can be submitted. |
-| disabled | `boolean`
Whether the radio group is disabled. |
-| readOnly | `boolean`
Whether the radio group items can be selected but not changed by the user. |
-
-| Data attribute | Description |
-| :------------- | :------------------------------------- |
-| data-orientation='horizontal' | Present when the slider has horizontal orientation. |
-| data-orientation='vertical' | Present when the slider has vertical orientation. |
-| data-valid | Present when the slider is valid according to the validation rules. |
-| data-invalid | Present when the slider is invalid according to the validation rules. |
-| data-required | Present when the user must slider an item before the owning form can be submitted. |
-| data-disabled | Present when the slider is disabled. |
-| data-readonly | Present when the slider is read only. |
+| Prop | Description |
+| :-------------------- | :------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| value | `number[]`
The controlled values of the slider. Must be used in conjunction with `onChange`. |
+| defaultValue | `number[]`
The value of the slider when initially rendered. Use when you do not need to control the state of the slider. |
+| onChange | `(value: number[]) => void`
Event handler called when the value changes. |
+| onChangeEnd | `(value: number[]) => void`
Event handler called when the value changes at the end of an interaction. |
+| inverted | `boolean`
Whether the slider is visually inverted. Defaults to false. |
+| minValue | `number`
The minimum slider value. Defaults to 0 |
+| maxValue | `number`
The maximum slider value. Defaults to 100 |
+| step | `number`
The stepping interval. Defaults to 1 |
+| minStepsBetweenThumbs | `number`
The minimum permitted steps between thumbs. Defaults to 0 |
+| getValueLabel | `(params: GetValueLabelParams) => string`
A function to get the accessible label text representing the current value in a human-readable format. If not provided, the value label will be read as a percentage of the max value. |
+| orientation | `'horizontal' \| 'vertical'`
The orientation of the slider. |
+| name | `string`
The name of the slider, used when submitting an HTML form. |
+| validationState | `'valid' \| 'invalid'`
Whether the slider should display its "valid" or "invalid" visual styling. |
+| required | `boolean`
Whether the user must check a radio group item before the owning form can be submitted. |
+| disabled | `boolean`
Whether the radio group is disabled. |
+| readOnly | `boolean`
Whether the radio group items can be selected but not changed by the user. |
+
+| Data attribute | Description |
+| :---------------------------- | :--------------------------------------------------------------------------------- |
+| data-orientation='horizontal' | Present when the slider has horizontal orientation. |
+| data-orientation='vertical' | Present when the slider has vertical orientation. |
+| data-valid | Present when the slider is valid according to the validation rules. |
+| data-invalid | Present when the slider is invalid according to the validation rules. |
+| data-required | Present when the user must slider an item before the owning form can be submitted. |
+| data-disabled | Present when the slider is disabled. |
+| data-readonly | Present when the slider is read only. |
`Slider.ValueLabel`, `Slider.Fill`, `Slider.Input`, `Slider.Thumb` and `Slider.Track` share the same data-attributes.
## Rendered elements
-| Component | Default rendered element |
-| :-------------- | :----------------------- |
-| `Slider.Root` | `div` |
-| `Slider.Track` | `div` |
-| `Slider.Fill` | `div` |
-| `Slider.Thumb` | `span` |
-| `Slider.Input` | `input` |
+| Component | Default rendered element |
+| :------------------ | :----------------------- |
+| `Slider.Root` | `div` |
+| `Slider.Track` | `div` |
+| `Slider.Fill` | `div` |
+| `Slider.Thumb` | `span` |
+| `Slider.Input` | `input` |
| `Slider.ValueLabel` | `div` |
## Accessibility
### Keyboard Interactions
-| Key | Description |
-| :-------------------- | :---------------------------------------------------------------------------------------------------------------------------- |
-| PageUp | Increases the value of the focused thumb by a larger `step`. |
-| PageDown | Decreases the value of the focused thumb by a larger `step`. |
-| ArrowDown | Decreases the value of the focused thumb by the `step` amount. |
-| ArrowUp | Increases the value of the focused thumb by the `step` amount. |
-| ArrowRight | Increments/decrements by the `step` value depending on `orientation`. |
-| ArrowLeft | Increments/decrements by the `step` value depending on `orientation`. |
-| Home | Sets the value of the first thumb to the minimum value.
-| End | Sets the value of the last thumb to the maximum value.
+| Key | Description |
+| :-------------------- | :-------------------------------------------------------------------- |
+| PageUp | Increases the value of the focused thumb by a larger `step`. |
+| PageDown | Decreases the value of the focused thumb by a larger `step`. |
+| ArrowDown | Decreases the value of the focused thumb by the `step` amount. |
+| ArrowUp | Increases the value of the focused thumb by the `step` amount. |
+| ArrowRight | Increments/decrements by the `step` value depending on `orientation`. |
+| ArrowLeft | Increments/decrements by the `step` value depending on `orientation`. |
+| Home | Sets the value of the first thumb to the minimum value. |
+| End | Sets the value of the last thumb to the maximum value. |