@@ -293,7 +302,7 @@ exports[`single slider > renders correctly custom tooltip 1`] = `
class="styles__a5ifr1p styles_direction_column__a5ifr1t styles__a5ifr1b styles_disabled_false__a5ifr1d styles_isDouble_false__a5ifr1f"
data-direction="column"
data-error="false"
- id="_r_2a_"
+ id="_r_2b_"
max="100"
min="0"
name="Name"
@@ -328,7 +337,7 @@ exports[`single slider > renders correctly default tooltip 1`] = `
>
@@ -348,8 +357,8 @@ exports[`single slider > renders correctly default tooltip 1`] = `
style="--_4k0ekn0: 100%;"
>
@@ -358,7 +367,7 @@ exports[`single slider > renders correctly default tooltip 1`] = `
class="styles__a5ifr1p styles_direction_column__a5ifr1t styles__a5ifr1b styles_disabled_false__a5ifr1d styles_isDouble_false__a5ifr1f"
data-direction="column"
data-error="false"
- id="_r_2e_"
+ id="_r_2f_"
max="100"
min="0"
name="Name"
@@ -393,7 +402,7 @@ exports[`single slider > renders correctly direction row 1`] = `
>
@@ -410,7 +419,7 @@ exports[`single slider > renders correctly direction row 1`] = `
class="styles__a5ifr1p styles_direction_row__a5ifr1u styles__a5ifr1b styles_disabled_false__a5ifr1d styles_isDouble_false__a5ifr1f"
data-direction="row"
data-error="false"
- id="_r_s_"
+ id="_r_t_"
max="100"
min="0"
name="Name"
@@ -451,7 +460,7 @@ exports[`single slider > renders correctly direction row with input 1`] = `
>
@@ -468,7 +477,7 @@ exports[`single slider > renders correctly direction row with input 1`] = `
class="styles__a5ifr1p styles_direction_row__a5ifr1u styles__a5ifr1b styles_disabled_false__a5ifr1d styles_isDouble_false__a5ifr1f"
data-direction="row"
data-error="false"
- id="_r_10_"
+ id="_r_11_"
max="100"
min="0"
name="Name"
@@ -500,7 +509,7 @@ exports[`single slider > renders correctly direction row with input 1`] = `
aria-label="input"
class="styles__1ce7gb6b styles_size_small__1ce7gb6d styles_controls_false__1ce7gb6g"
data-testid="slider-input"
- id="_r_13_"
+ id="_r_14_"
max="100"
min="0"
placeholder=""
@@ -535,7 +544,7 @@ exports[`single slider > renders correctly disabled 1`] = `
>
@@ -561,7 +570,7 @@ exports[`single slider > renders correctly disabled 1`] = `
data-direction="column"
data-error="false"
disabled=""
- id="_r_1d_"
+ id="_r_1e_"
max="100"
min="0"
name="Name"
@@ -595,7 +604,7 @@ exports[`single slider > renders correctly error boolean 1`] = `
>
@@ -619,7 +628,7 @@ exports[`single slider > renders correctly error boolean 1`] = `
class="styles__a5ifr1p styles_direction_column__a5ifr1t styles_error_true__a5ifr1s styles__a5ifr1b styles_disabled_false__a5ifr1d styles_isDouble_false__a5ifr1f"
data-direction="column"
data-error="true"
- id="_r_1h_"
+ id="_r_1i_"
max="100"
min="0"
name="Name"
@@ -658,7 +667,7 @@ exports[`single slider > renders correctly error boolean and helper 1`] = `
>
@@ -682,7 +691,7 @@ exports[`single slider > renders correctly error boolean and helper 1`] = `
class="styles__a5ifr1p styles_direction_column__a5ifr1t styles_error_true__a5ifr1s styles__a5ifr1b styles_disabled_false__a5ifr1d styles_isDouble_false__a5ifr1f"
data-direction="column"
data-error="true"
- id="_r_1m_"
+ id="_r_1n_"
max="100"
min="0"
name="Name"
@@ -721,7 +730,7 @@ exports[`single slider > renders correctly error string 1`] = `
>
@@ -745,7 +754,7 @@ exports[`single slider > renders correctly error string 1`] = `
class="styles__a5ifr1p styles_direction_column__a5ifr1t styles_error_true__a5ifr1s styles__a5ifr1b styles_disabled_false__a5ifr1d styles_isDouble_false__a5ifr1f"
data-direction="column"
data-error="true"
- id="_r_1r_"
+ id="_r_1s_"
max="100"
min="0"
name="Name"
@@ -784,7 +793,7 @@ exports[`single slider > renders correctly error string and helper 1`] = `
>
@@ -808,7 +817,7 @@ exports[`single slider > renders correctly error string and helper 1`] = `
class="styles__a5ifr1p styles_direction_column__a5ifr1t styles_error_true__a5ifr1s styles__a5ifr1b styles_disabled_false__a5ifr1d styles_isDouble_false__a5ifr1f"
data-direction="column"
data-error="true"
- id="_r_20_"
+ id="_r_21_"
max="100"
min="0"
name="Name"
@@ -847,7 +856,7 @@ exports[`single slider > renders correctly input 1`] = `
>
@@ -872,7 +881,7 @@ exports[`single slider > renders correctly input 1`] = `
aria-label="input"
class="styles__1ce7gb6b styles_size_small__1ce7gb6d styles_controls_false__1ce7gb6g"
data-testid="slider-input"
- id="_r_27_"
+ id="_r_28_"
max="100"
min="0"
placeholder=""
@@ -897,7 +906,7 @@ exports[`single slider > renders correctly input 1`] = `
class="styles__a5ifr1p styles_direction_column__a5ifr1t styles__a5ifr1b styles_disabled_false__a5ifr1d styles_isDouble_false__a5ifr1f"
data-direction="column"
data-error="false"
- id="_r_25_"
+ id="_r_26_"
max="100"
min="0"
name="Name"
@@ -931,7 +940,7 @@ exports[`single slider > renders correctly min max 1`] = `
>
@@ -955,7 +964,7 @@ exports[`single slider > renders correctly min max 1`] = `
class="styles__a5ifr1p styles_direction_column__a5ifr1t styles__a5ifr1b styles_disabled_false__a5ifr1d styles_isDouble_false__a5ifr1f"
data-direction="column"
data-error="false"
- id="_r_2u_"
+ id="_r_2v_"
max="10"
min="1"
name="Name"
@@ -989,7 +998,7 @@ exports[`single slider > renders correctly prefix 1`] = `
>
@@ -1013,7 +1022,7 @@ exports[`single slider > renders correctly prefix 1`] = `
class="styles__a5ifr1p styles_direction_column__a5ifr1t styles__a5ifr1b styles_disabled_false__a5ifr1d styles_isDouble_false__a5ifr1f"
data-direction="column"
data-error="false"
- id="_r_o_"
+ id="_r_p_"
max="100"
min="0"
name="Name"
@@ -1050,7 +1059,7 @@ exports[`single slider > renders correctly required 1`] = `
>
@@ -1080,7 +1089,7 @@ exports[`single slider > renders correctly required 1`] = `
class="styles__a5ifr1p styles_direction_column__a5ifr1t styles__a5ifr1b styles_disabled_false__a5ifr1d styles_isDouble_false__a5ifr1f"
data-direction="column"
data-error="false"
- id="_r_5_"
+ id="_r_6_"
max="100"
min="0"
name="Name"
@@ -1114,7 +1123,7 @@ exports[`single slider > renders correctly step 1`] = `
>
@@ -1138,7 +1147,7 @@ exports[`single slider > renders correctly step 1`] = `
class="styles__a5ifr1p styles_direction_column__a5ifr1t styles__a5ifr1b styles_disabled_false__a5ifr1d styles_isDouble_false__a5ifr1f"
data-direction="column"
data-error="false"
- id="_r_32_"
+ id="_r_33_"
max="100"
min="0"
name="Name"
@@ -1172,7 +1181,7 @@ exports[`single slider > renders correctly suffix complex 1`] = `
>
@@ -1201,7 +1210,7 @@ exports[`single slider > renders correctly suffix complex 1`] = `
class="styles__a5ifr1p styles_direction_column__a5ifr1t styles__a5ifr1b styles_disabled_false__a5ifr1d styles_isDouble_false__a5ifr1f"
data-direction="column"
data-error="false"
- id="_r_e_"
+ id="_r_f_"
max="100"
min="0"
name="Name"
@@ -1235,7 +1244,7 @@ exports[`single slider > renders correctly suffix string 1`] = `
>
@@ -1259,7 +1268,7 @@ exports[`single slider > renders correctly suffix string 1`] = `
class="styles__a5ifr1p styles_direction_column__a5ifr1t styles__a5ifr1b styles_disabled_false__a5ifr1d styles_isDouble_false__a5ifr1f"
data-direction="column"
data-error="false"
- id="_r_a_"
+ id="_r_b_"
max="100"
min="0"
name="Name"
@@ -1293,7 +1302,7 @@ exports[`single slider > renders correctly suffix string input 1`] = `
>
@@ -1318,7 +1327,7 @@ exports[`single slider > renders correctly suffix string input 1`] = `
aria-label="input"
class="styles__1ce7gb6b styles_hasUnit_true__1ce7gb6c styles_size_small__1ce7gb6d styles_controls_false__1ce7gb6g"
data-testid="slider-input"
- id="_r_k_"
+ id="_r_l_"
max="100"
min="0"
placeholder=""
@@ -1348,7 +1357,7 @@ exports[`single slider > renders correctly suffix string input 1`] = `
class="styles__a5ifr1p styles_direction_column__a5ifr1t styles__a5ifr1b styles_disabled_false__a5ifr1d styles_isDouble_false__a5ifr1f"
data-direction="column"
data-error="false"
- id="_r_i_"
+ id="_r_j_"
max="100"
min="0"
name="Name"
@@ -1382,7 +1391,7 @@ exports[`single slider > renders correctly with custom ticks 1`] = `
>
@@ -1406,7 +1415,7 @@ exports[`single slider > renders correctly with custom ticks 1`] = `
class="styles__a5ifr1p styles_direction_column__a5ifr1t styles__a5ifr1b styles_disabled_false__a5ifr1d styles_isDouble_false__a5ifr1f"
data-direction="column"
data-error="false"
- id="_r_2i_"
+ id="_r_2j_"
max="1"
min="0"
name="Name"
@@ -1471,7 +1480,7 @@ exports[`single slider > renders correctly with default ticks without label 1`]
>
@@ -1495,7 +1504,7 @@ exports[`single slider > renders correctly with default ticks without label 1`]
class="styles__a5ifr1p styles_direction_column__a5ifr1t styles__a5ifr1b styles_disabled_false__a5ifr1d styles_isDouble_false__a5ifr1f"
data-direction="column"
data-error="false"
- id="_r_2o_"
+ id="_r_2p_"
max="1"
min="0"
name="Name"
@@ -1560,7 +1569,7 @@ exports[`single slider > renders correctly with value < min 1`] = `
>
@@ -1584,7 +1593,7 @@ exports[`single slider > renders correctly with value < min 1`] = `
class="styles__a5ifr1p styles_direction_column__a5ifr1t styles__a5ifr1b styles_disabled_false__a5ifr1d styles_isDouble_false__a5ifr1f"
data-direction="column"
data-error="false"
- id="_r_15_"
+ id="_r_16_"
max="100"
min="10"
name="Name"
@@ -1618,7 +1627,7 @@ exports[`single slider > renders correctly with value > max 1`] = `
>
@@ -1642,7 +1651,7 @@ exports[`single slider > renders correctly with value > max 1`] = `
class="styles__a5ifr1p styles_direction_column__a5ifr1t styles__a5ifr1b styles_disabled_false__a5ifr1d styles_isDouble_false__a5ifr1f"
data-direction="column"
data-error="false"
- id="_r_19_"
+ id="_r_1a_"
max="10"
min="0"
name="Name"
diff --git a/packages/ui/src/components/Slider/__tests__/doubleSlider.test.tsx b/packages/ui/src/components/Slider/__tests__/doubleSlider.test.tsx
index 7033bdc04c..d80491bec2 100644
--- a/packages/ui/src/components/Slider/__tests__/doubleSlider.test.tsx
+++ b/packages/ui/src/components/Slider/__tests__/doubleSlider.test.tsx
@@ -29,6 +29,7 @@ describe('double slider', () => {
direction="row"
double
label="Label"
+ labelDescription="labeldescription"
name="Name"
value={[1, 14]}
/>,
diff --git a/packages/ui/src/components/Slider/__tests__/singleSlider.test.tsx b/packages/ui/src/components/Slider/__tests__/singleSlider.test.tsx
index 23ea4624ff..0679426971 100644
--- a/packages/ui/src/components/Slider/__tests__/singleSlider.test.tsx
+++ b/packages/ui/src/components/Slider/__tests__/singleSlider.test.tsx
@@ -25,7 +25,13 @@ describe('single slider', () => {
test('renders correctly', () => {
shouldMatchSnapshot(
- ,
+ ,
)
})
diff --git a/packages/ui/src/components/Slider/components/DoubleSlider.tsx b/packages/ui/src/components/Slider/components/DoubleSlider.tsx
index 9fc0781e01..b2326b740d 100644
--- a/packages/ui/src/components/Slider/components/DoubleSlider.tsx
+++ b/packages/ui/src/components/Slider/components/DoubleSlider.tsx
@@ -49,6 +49,7 @@ export const DoubleSlider = ({
required,
tooltipPosition,
'aria-label': ariaLabel,
+ labelDescription,
}: DoubleSliderProps) => {
const theme = useTheme()
const localId = useId()
@@ -274,7 +275,11 @@ export const DoubleSlider = ({
{label ? (
-
diff --git a/packages/ui/src/components/Slider/components/SingleSlider.tsx b/packages/ui/src/components/Slider/components/SingleSlider.tsx
index 05912f5c77..2e7f05d550 100644
--- a/packages/ui/src/components/Slider/components/SingleSlider.tsx
+++ b/packages/ui/src/components/Slider/components/SingleSlider.tsx
@@ -45,6 +45,7 @@ export const SingleSlider = ({
prefix,
suffix,
required,
+ labelDescription,
'aria-label': ariaLabel,
tooltipPosition,
}: SingleSliderProps) => {
@@ -193,7 +194,11 @@ export const SingleSlider = ({
direction="row"
justifyContent="space-between"
>
-
+
{label}
{direction === 'column' ? styledValue(valueToShow) : null}
diff --git a/packages/ui/src/components/Slider/index.tsx b/packages/ui/src/components/Slider/index.tsx
index 412d7fd016..19927095e9 100644
--- a/packages/ui/src/components/Slider/index.tsx
+++ b/packages/ui/src/components/Slider/index.tsx
@@ -41,6 +41,7 @@ export const Slider = ({
className,
tooltipPosition = 'top',
style,
+ labelDescription,
'aria-label': ariaLabel,
}: SliderProps) => {
// we check if options exists if so we set the bounds to the length of the options
@@ -78,6 +79,7 @@ export const Slider = ({
id={id}
input={input}
label={label}
+ labelDescription={labelDescription}
max={correctedBounds.max}
min={correctedBounds.min}
name={name}
@@ -105,6 +107,7 @@ export const Slider = ({
id={id}
input={input}
label={label}
+ labelDescription={labelDescription}
max={correctedBounds.max}
min={correctedBounds.min}
name={name}
diff --git a/packages/ui/src/components/Slider/types.ts b/packages/ui/src/components/Slider/types.ts
index f5e0a0c2e0..225ab43414 100644
--- a/packages/ui/src/components/Slider/types.ts
+++ b/packages/ui/src/components/Slider/types.ts
@@ -24,6 +24,7 @@ type DefaultProps = {
*/
step?: number
required?: boolean
+ labelDescription?: ReactNode
/**
* Where to position the tooltip
*/