diff --git a/change/@fluentui-react-slider-6edcf23c-8a46-4642-b3e7-af380c6c87f0.json b/change/@fluentui-react-slider-6edcf23c-8a46-4642-b3e7-af380c6c87f0.json new file mode 100644 index 00000000000000..0608abec415f4d --- /dev/null +++ b/change/@fluentui-react-slider-6edcf23c-8a46-4642-b3e7-af380c6c87f0.json @@ -0,0 +1,7 @@ +{ + "type": "patch", + "comment": "Adding cursor pointer to the Slider component", + "packageName": "@fluentui/react-slider", + "email": "petrduda@microsoft.com", + "dependentChangeType": "patch" +} diff --git a/packages/react-components/react-slider/src/components/Slider/useSliderStyles.ts b/packages/react-components/react-slider/src/components/Slider/useSliderStyles.ts index 9b589298c6d7f3..7ffd5a1152bdcb 100644 --- a/packages/react-components/react-slider/src/components/Slider/useSliderStyles.ts +++ b/packages/react-components/react-slider/src/components/Slider/useSliderStyles.ts @@ -221,6 +221,7 @@ const useThumbStyles = makeStyles({ */ const useInputStyles = makeStyles({ input: { + cursor: 'pointer', opacity: 0, gridRowStart: 'slider', gridRowEnd: 'slider', @@ -229,6 +230,9 @@ const useInputStyles = makeStyles({ ...shorthands.padding(0), ...shorthands.margin(0), }, + disabled: { + cursor: 'default', + }, horizontal: { height: `var(${thumbSizeVar})`, width: `calc(100% + var(${thumbSizeVar}))`, @@ -279,6 +283,7 @@ export const useSliderStyles_unstable = (state: SliderState): SliderState => { sliderClassNames.input, inputStyles.input, isVertical ? inputStyles.vertical : inputStyles.horizontal, + state.disabled && inputStyles.disabled, state.input.className, );