feat: slider barclick and disabled prop added

Author: tugcekucukoglu

packages/headless/src/slider/useSlider.ts

@@ -1,7 +1,7 @@
 import { withHeadless } from '@primereact/core/headless';
 import { useEventListener } from '@primereact/hooks';
 import { useSliderProps } from '@primereact/types/shared/slider';
-import { focus, getWindowScrollLeft, getWindowScrollTop, isRTL } from '@primeuix/utils';
+import { focus, getAttribute, getWindowScrollLeft, getWindowScrollTop, isRTL } from '@primeuix/utils';
 import * as React from 'react';
 import { defaultProps } from './useSlider.props';
 
@@ -216,6 +216,17 @@ export const useSlider = withHeadless({
             }
         };
 
+        const onBarClick = (event: React.MouseEvent) => {
+            if (props.disabled) {
+                return;
+            }
+
+            if (getAttribute(event.target as Element, 'data-pc-name') !== 'sliderthumb') {
+                updateDomData();
+                handleValue(event);
+            }
+        };
+
         const [bindThumbMouseMoveListener, unbindThumbMouseMoveListener] = useEventListener({
             type: 'mousemove',
             listener: (event: Event) => onDrag(event as unknown as React.MouseEvent)
@@ -372,6 +383,7 @@ export const useSlider = withHeadless({
             onDragEnd,
             onMouseDown,
             onKeyDown,
+            onBarClick,
             rangeStyle,
             handleThumbStyle,
             rangeStartHandleStyle,

packages/primereact/src/slider/Slider.props.ts

@@ -3,5 +3,6 @@ import type { SliderProps } from '@primereact/types/shared/slider';
 
 export const defaultProps: SliderProps = {
     ...HeadlessSlider.defaultProps,
-    as: 'div'
+    as: 'div',
+    disabled: undefined
 };

packages/primereact/src/slider/Slider.tsx

@@ -25,7 +25,8 @@ export const Slider = withComponent({
         const rootProps = mergeProps(
             {
                 id,
-                className: cx('root')
+                className: cx('root'),
+                onClick: instance.onBarClick
             },
             ptmi('root')
         );

packages/types/src/shared/slider/Slider.types.ts

@@ -49,6 +49,11 @@ export interface SliderChangeEvent extends useSliderChangeEvent<React.SyntheticE
  * Defines valid properties in Slider component.
  */
 export interface SliderProps extends BaseComponentProps<SliderInstance, Omit<useSliderProps, 'onValueChange'>, SliderPassThrough> {
+    /**
+     * When present, it specifies that the element should be disabled.
+     * @default false
+     */
+    disabled?: boolean | undefined;
     /**
      * Callback fired when the ToggleButton's pressed state changes.
      * @param event The event that triggered the change.