diff --git a/examples/vue-ts/src/pages/slider.tsx b/examples/vue-ts/src/pages/slider.tsx
index da17cbd092..9cdda8ca99 100644
--- a/examples/vue-ts/src/pages/slider.tsx
+++ b/examples/vue-ts/src/pages/slider.tsx
@@ -47,7 +47,7 @@ export default defineComponent({
-
diff --git a/packages/machines/slider/src/slider.anatomy.ts b/packages/machines/slider/src/slider.anatomy.ts
index 57267f4512..e907e6436e 100644
--- a/packages/machines/slider/src/slider.anatomy.ts
+++ b/packages/machines/slider/src/slider.anatomy.ts
@@ -4,7 +4,7 @@ export const anatomy = createAnatomy("slider").parts(
"root",
"label",
"thumb",
- "output",
+ "valueText",
"track",
"range",
"control",
diff --git a/packages/machines/slider/src/slider.connect.ts b/packages/machines/slider/src/slider.connect.ts
index 96b174310c..abc40cf70e 100644
--- a/packages/machines/slider/src/slider.connect.ts
+++ b/packages/machines/slider/src/slider.connect.ts
@@ -104,14 +104,14 @@ export function connect
(state: State, send: Send, normalize
style: dom.getRootStyle(state.context),
}),
- outputProps: normalize.output({
- ...parts.output.attrs,
+ valueTextProps: normalize.output({
+ ...parts.valueText.attrs,
dir: state.context.dir,
"data-disabled": dataAttr(isDisabled),
"data-orientation": state.context.orientation,
"data-invalid": dataAttr(isInvalid),
"data-focus": dataAttr(isFocused),
- id: dom.getOutputId(state.context),
+ id: dom.getValueTextId(state.context),
htmlFor: sliderValue.map((_v, i) => dom.getHiddenInputId(state.context, i)).join(" "),
"aria-live": "off",
}),
diff --git a/packages/machines/slider/src/slider.dom.ts b/packages/machines/slider/src/slider.dom.ts
index 7eff16a978..71d34386df 100644
--- a/packages/machines/slider/src/slider.dom.ts
+++ b/packages/machines/slider/src/slider.dom.ts
@@ -14,7 +14,7 @@ export const dom = createScope({
getTrackId: (ctx: Ctx) => ctx.ids?.track ?? `slider:${ctx.id}:track`,
getRangeId: (ctx: Ctx) => ctx.ids?.range ?? `slider:${ctx.id}:range`,
getLabelId: (ctx: Ctx) => ctx.ids?.label ?? `slider:${ctx.id}:label`,
- getOutputId: (ctx: Ctx) => ctx.ids?.output ?? `slider:${ctx.id}:output`,
+ getValueTextId: (ctx: Ctx) => ctx.ids?.valueText ?? `slider:${ctx.id}:valueText`,
getMarkerId: (ctx: Ctx, value: number) => ctx.ids?.marker?.(value) ?? `slider:${ctx.id}:marker:${value}`,
getRootEl: (ctx: Ctx) => dom.getById(ctx, dom.getRootId(ctx)),
diff --git a/packages/machines/slider/src/slider.types.ts b/packages/machines/slider/src/slider.types.ts
index b1ae8242a1..39ed018e88 100644
--- a/packages/machines/slider/src/slider.types.ts
+++ b/packages/machines/slider/src/slider.types.ts
@@ -25,7 +25,7 @@ type ElementIds = Partial<{
track: string
range: string
label: string
- output: string
+ valueText: string
marker(index: number): string
}>
@@ -268,7 +268,7 @@ export interface MachineApi {
focus(): void
labelProps: T["label"]
rootProps: T["element"]
- outputProps: T["output"]
+ valueTextProps: T["output"]
trackProps: T["element"]
getThumbProps(props: ThumbProps): T["element"]
getHiddenInputProps(props: ThumbProps): T["input"]
diff --git a/shared/src/style.css b/shared/src/style.css
index 44af246168..0bbdcfc25d 100644
--- a/shared/src/style.css
+++ b/shared/src/style.css
@@ -593,7 +593,7 @@ main [data-testid="scrubber"] {
width: 100%;
}
-[data-scope="slider"][data-part="output"] {
+[data-scope="slider"][data-part="value-text"] {
margin-inline-start: 12px;
}
diff --git a/website/components/machines/range-slider.tsx b/website/components/machines/range-slider.tsx
index c49d936e69..756c928316 100644
--- a/website/components/machines/range-slider.tsx
+++ b/website/components/machines/range-slider.tsx
@@ -22,7 +22,7 @@ export function RangeSlider(props: any) {
Quantity
-
+
{api.value.join(" - ")}
diff --git a/website/components/machines/slider.tsx b/website/components/machines/slider.tsx
index b09b29585c..a68148beea 100644
--- a/website/components/machines/slider.tsx
+++ b/website/components/machines/slider.tsx
@@ -18,7 +18,7 @@ export function Slider(props: any) {
Quantity
-
+
{api.value.at(0)}
diff --git a/website/data/components/range-slider.mdx b/website/data/components/range-slider.mdx
index 410f089714..b2df5693dc 100644
--- a/website/data/components/range-slider.mdx
+++ b/website/data/components/range-slider.mdx
@@ -245,7 +245,7 @@ label, control and thumb.
/* styles for control disabled state */
}
-[data-part="output"][data-disabled] {
+[data-part="value-text"][data-disabled] {
/* styles for output disabled state */
}
diff --git a/website/data/components/slider.mdx b/website/data/components/slider.mdx
index d51cf80ad2..b69cb28840 100644
--- a/website/data/components/slider.mdx
+++ b/website/data/components/slider.mdx
@@ -257,7 +257,7 @@ label, control and thumb.
/* styles for control disabled state */
}
-[data-part="output"][data-disabled] {
+[data-part="value-text"][data-disabled] {
/* styles for output disabled state */
}
@@ -288,7 +288,7 @@ track, range, label, and thumb parts.
/* styles for control invalid state */
}
-[data-part="output"][data-invalid] {
+[data-part="valueText"][data-invalid] {
/* styles for output invalid state */
}
diff --git a/website/data/snippets/react/slider/usage.mdx b/website/data/snippets/react/slider/usage.mdx
index adc3da8a45..bcc51ddf0c 100644
--- a/website/data/snippets/react/slider/usage.mdx
+++ b/website/data/snippets/react/slider/usage.mdx
@@ -11,7 +11,7 @@ export function Slider() {
- {api.value.at(0)}
+ {api.value.at(0)}
diff --git a/website/data/snippets/solid/slider/usage.mdx b/website/data/snippets/solid/slider/usage.mdx
index ba514ceabb..6908d3880f 100644
--- a/website/data/snippets/solid/slider/usage.mdx
+++ b/website/data/snippets/solid/slider/usage.mdx
@@ -14,7 +14,7 @@ export function Slider() {
- {api().value.at(0)}
+ {api().value.at(0)}
diff --git a/website/data/snippets/vue-jsx/slider/usage.mdx b/website/data/snippets/vue-jsx/slider/usage.mdx
index a860455e0d..9e7e66af59 100644
--- a/website/data/snippets/vue-jsx/slider/usage.mdx
+++ b/website/data/snippets/vue-jsx/slider/usage.mdx
@@ -18,7 +18,7 @@ export default defineComponent({
- {api.value.at(0)}
+ {api.value.at(0)}
diff --git a/website/data/snippets/vue-sfc/slider/usage.mdx b/website/data/snippets/vue-sfc/slider/usage.mdx
index 4dbb03ebfe..e4fab62464 100644
--- a/website/data/snippets/vue-sfc/slider/usage.mdx
+++ b/website/data/snippets/vue-sfc/slider/usage.mdx
@@ -12,7 +12,7 @@ const api = computed(() => slider.connect(state.value, send, normalizeProps));
- {{ api.value.at(0) }}
+ {{ api.value.at(0) }}