slider-filed

Author: tripolskypetr

package-lock.json

@@ -1,6 +1,6 @@
 {
   "name": "react-declarative-mantine",
-  "version": "0.0.34",
+  "version": "0.0.36",
   "description": "The Mantine ui kit bindings for react-declarative",
   "private": false,
   "author": {

package.json

@@ -15,6 +15,7 @@ import ComboArray from './components/ComboArray';
 import Switch from './components/Switch';
 import Radio from './components/Radio';
 import CheckBox from './components/CheckBox';
+import Slider from './components/Slider';
 
 interface IOneSlotFactoryProps {
     children: React.ReactNode;
@@ -33,6 +34,7 @@ export const defaultSlots = {
     YesNo,
     Switch,
     Radio,
+    Slider,
     CheckBox,
 };
 

src/OneSlotFactory/OneSlotFactory.tsx

@@ -0,0 +1,31 @@
+import * as React from "react";
+
+import { Slider as UiSlider } from '@mantine/core';
+
+import { ISliderSlot } from 'react-declarative';
+
+export const Slider = ({
+  disabled,
+  value,
+  onChange,
+  minSlider,
+  maxSlider,
+}: ISliderSlot) => {
+  return (
+    <UiSlider
+      size="md"
+      mt="xs"
+      mb="xs"
+      style={{
+        opacity: disabled ? 0.5 : undefined,
+      }}
+      value={value}
+      min={minSlider}
+      max={maxSlider}
+      disabled={disabled}
+      onChange={(value) => onChange(value)}
+    />
+  );
+};
+
+export default Slider;