@ray-js/lamp-saturation-slider 1.1.6 → 1.1.8-beta-1

package/lib/index.js

@@ -21,7 +21,10 @@ function LampSaturationSlider(props) {
     onTouchStart,
     onTouchMove,
     onTouchEnd,
-    enableTouch = true
+    enableTouch = true,
+    max = 1000,
+    useCustomThumbStyle,
+    useCustomTrackStyle
   } = props;
   const startRefValue = useRef(-1);
   const endRefValue = useRef(-1);
@@ -48,7 +51,7 @@ function LampSaturationSlider(props) {
   }, /*#__PURE__*/React.createElement(Slider, {
     instanceId: props.instanceId || instanceId.current,
     min: 0,
-    max: 1000,
+    max: max,
     disable: disable,
     end: controllerSaturation,
     enableTouch: enableTouch,
@@ -117,7 +120,7 @@ function LampSaturationSlider(props) {
       height: `${88}rpx`,
       borderRadius: `${28}rpx`
     }, trackStyle), {}, {
-      background: `linear-gradient(to right, rgba(${r}, ${g}, ${b}, 0.01) 0%, rgba(${r}, ${g}, ${b}, 1) 100%)`
+      background: useCustomTrackStyle ? trackStyle === null || trackStyle === void 0 ? void 0 : trackStyle.background : `linear-gradient(to right, rgba(${r}, ${g}, ${b}, 0.01) 0%, rgba(${r}, ${g}, ${b}, 1) 100%)`
     })),
     barStyle: toStyle({
       background: 'transparent'
@@ -129,10 +132,10 @@ function LampSaturationSlider(props) {
       borderRadius: '28rpx',
       background: `${disable ? '#000' : 'transparent'}`
     }, thumbStyle)),
-    thumbStyleRenderFormatter: {
+    thumbStyleRenderFormatter: useCustomThumbStyle ? null : {
       background: `hsl(${props.hue}deg 100% value%)`
     },
-    thumbStyleRenderValueScale: 0.05,
+    thumbStyleRenderValueScale: 50 / max,
     thumbStyleRenderValueStart: 50,
     thumbStyleRenderValueReverse: true
   }));

package/lib/props.d.ts

@@ -58,5 +58,23 @@ export interface IProps {
      * @default true
      */
     enableTouch?: boolean;
+    /**
+     * @description.en Maximum color temperature
+     * @description.zh 最大色温
+     * @default 1000
+     */
+    max?: 100 | 1000;
+    /**
+     * @description.en useCustomThumbStyle
+     * @description.zh 使用自定义按钮样式
+     * @default null
+     */
+    useCustomThumbStyle?: boolean;
+    /**
+     * @description.en useCustomTrackStyle
+     * @description.zh 使用自定义滑槽样式
+     * @default null
+     */
+    useCustomTrackStyle?: boolean;
 }
 export declare const defaultProps: IProps;

package/lib/props.js

@@ -6,5 +6,9 @@ export const defaultProps = {
   trackStyle: {},
   onTouchStart: () => null,
   onTouchMove: () => null,
-  onTouchEnd: () => null
+  onTouchEnd: () => null,
+  max: 1000,
+  hue: 0,
+  useCustomThumbStyle: false,
+  useCustomTrackStyle: false
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ray-js/lamp-saturation-slider",
-  "version": "1.1.6",
+  "version": "1.1.8-beta-1",
   "description": "照明色温Slider",
   "main": "lib/index",
   "files": [
@@ -60,7 +60,7 @@
     ]
   },
   "dependencies": {
-    "@ray-js/components-ty-slider": "^0.2.40"
+    "@ray-js/components-ty-slider": "^0.2.52"
   },
   "maintainers": [
     {