diff --git a/COMPONENT_INDEX.md b/COMPONENT_INDEX.md
index 9fd78373b5..c48ec72ee2 100644
--- a/COMPONENT_INDEX.md
+++ b/COMPONENT_INDEX.md
@@ -3485,26 +3485,27 @@ None.
### Props
-| Prop name | Required | Kind | Reactive | Type | Default value | Description |
-| :------------- | :------- | :--------------- | :------- | --------------------------------------- | ------------------------------------------------ | ----------------------------------------------------------------------------------- |
-| ref | No | let | Yes | null | HTMLDivElement | null | Obtain a reference to the HTML element |
-| value | No | let | Yes | number | 0 | Specify the value of the slider |
-| max | No | let | No | number | 100 | Set the maximum slider value |
-| maxLabel | No | let | No | string | "" | Specify the label for the max value |
-| min | No | let | No | number | 0 | Set the minimum slider value |
-| minLabel | No | let | No | string | "" | Specify the label for the min value |
-| step | No | let | No | number | 1 | Set the step value |
-| stepMultiplier | No | let | No | number | 4 | Set the step multiplier value |
-| required | No | let | No | boolean | false | Set to `true` to require a value |
-| inputType | No | let | No | string | "number" | Specify the input type |
-| disabled | No | let | No | boolean | false | Set to `true` to disable the slider |
-| light | No | let | No | boolean | false | Set to `true` to enable the light variant |
-| hideTextInput | No | let | No | boolean | false | Set to `true` to hide the text input |
-| fullWidth | No | let | No | boolean | false | Set to `true` for the slider to span
the full width of its containing element. |
-| id | No | let | No | string | "ccs-" + Math.random().toString(36) | Set an id for the slider div element |
-| invalid | No | let | No | boolean | false | Set to `true` to indicate an invalid state |
-| labelText | No | let | No | string | "" | Specify the label text |
-| name | No | let | No | string | "" | Set a name for the slider element |
+| Prop name | Required | Kind | Reactive | Type | Default value | Description |
+| :------------- | :------- | :--------------- | :------- | --------------------------------------- | ------------------------------------------------ | -------------------------------------------------------------------------------------------------------------------------- |
+| ref | No | let | Yes | null | HTMLDivElement | null | Obtain a reference to the HTML element |
+| value | No | let | Yes | number | 0 | Specify the value of the slider |
+| max | No | let | No | number | 100 | Set the maximum slider value |
+| maxLabel | No | let | No | string | "" | Specify the label for the max value |
+| min | No | let | No | number | 0 | Set the minimum slider value |
+| minLabel | No | let | No | string | "" | Specify the label for the min value |
+| step | No | let | No | number | 1 | Set the step value |
+| stepMultiplier | No | let | No | number | 4 | Set the step multiplier value |
+| required | No | let | No | boolean | false | Set to `true` to require a value |
+| inputType | No | let | No | string | "number" | Specify the input type |
+| disabled | No | let | No | boolean | false | Set to `true` to disable the slider |
+| light | No | let | No | boolean | false | Set to `true` to enable the light variant |
+| hideTextInput | No | let | No | boolean | false | Set to `true` to hide the text input |
+| fullWidth | No | let | No | boolean | false | Set to `true` for the slider to span
the full width of its containing element. |
+| id | No | let | No | string | "ccs-" + Math.random().toString(36) | Set an id for the slider div element |
+| invalid | No | let | No | boolean | false | Set to `true` to indicate an invalid state |
+| labelText | No | let | No | string | "" | Specify the label text.
Alternatively, use the "labelText" slot (e.g., <span slot="labelText">...</span>) |
+| hideLabel | No | let | No | boolean | false | Set to `true` to visually hide the label text |
+| name | No | let | No | string | "" | Set a name for the slider element |
### Slots
diff --git a/docs/src/COMPONENT_API.json b/docs/src/COMPONENT_API.json
index 6675e6550b..381a6bcc20 100644
--- a/docs/src/COMPONENT_API.json
+++ b/docs/src/COMPONENT_API.json
@@ -11215,7 +11215,7 @@
{
"name": "labelText",
"kind": "let",
- "description": "Specify the label text",
+ "description": "Specify the label text.\nAlternatively, use the \"labelText\" slot (e.g., ...)",
"type": "string",
"value": "\"\"",
"isFunction": false,
@@ -11224,6 +11224,18 @@
"constant": false,
"reactive": false
},
+ {
+ "name": "hideLabel",
+ "kind": "let",
+ "description": "Set to `true` to visually hide the label text",
+ "type": "boolean",
+ "value": "false",
+ "isFunction": false,
+ "isFunctionDeclaration": false,
+ "isRequired": false,
+ "constant": false,
+ "reactive": false
+ },
{
"name": "name",
"kind": "let",
diff --git a/docs/src/pages/components/Slider.svx b/docs/src/pages/components/Slider.svx
index 3710eeeeaf..2fb777354b 100644
--- a/docs/src/pages/components/Slider.svx
+++ b/docs/src/pages/components/Slider.svx
@@ -17,6 +17,10 @@ Set `fullWidth` to `true` for the slider to span the full width of its containin
+## Hidden label
+
+
+
## Hidden text input
diff --git a/src/Slider/Slider.svelte b/src/Slider/Slider.svelte
index 4ac77737d9..0c8f38ed55 100644
--- a/src/Slider/Slider.svelte
+++ b/src/Slider/Slider.svelte
@@ -47,9 +47,15 @@
/** Set to `true` to indicate an invalid state */
export let invalid = false;
- /** Specify the label text */
+ /**
+ * Specify the label text.
+ * Alternatively, use the "labelText" slot (e.g., ...)
+ */
export let labelText = "";
+ /** Set to `true` to visually hide the label text */
+ export let hideLabel = false;
+
/** Set a name for the slider element */
export let name = "";
@@ -145,6 +151,7 @@
id="{labelId}"
class:bx--label="{true}"
class:bx--label--disabled="{disabled}"
+ class:bx--visually-hidden="{hideLabel}"
>
{labelText}
diff --git a/types/Slider/Slider.svelte.d.ts b/types/Slider/Slider.svelte.d.ts
index 76ccc3bc05..bdecbe61c7 100644
--- a/types/Slider/Slider.svelte.d.ts
+++ b/types/Slider/Slider.svelte.d.ts
@@ -96,11 +96,18 @@ export interface SliderProps extends RestProps {
invalid?: boolean;
/**
- * Specify the label text
+ * Specify the label text.
+ * Alternatively, use the "labelText" slot (e.g., ...)
* @default ""
*/
labelText?: string;
+ /**
+ * Set to `true` to visually hide the label text
+ * @default false
+ */
+ hideLabel?: boolean;
+
/**
* Set a name for the slider element
* @default ""