add slider

Author: softmarshmallow

packages/editor-ui-property/css/index.ts

@@ -1,14 +1,16 @@
 import { css } from "@emotion/react";
 
 export const input_type_number_disable_browser_default_appearence = css`
-  /* disable default number up down arrow */
-  ::-webkit-outer-spin-button,
-  ::-webkit-inner-spin-button {
+  /* Disabling up and down arrows for number inputs */
+  &[type="number"] {
+    -moz-appearance: textfield; /* Firefox */
+    appearance: textfield; /* Chrome, Safari, Edge, and Opera */
+  }
+
+  /* Hide the spin button in Chrome, Safari, Edge, and Opera */
+  &::-webkit-outer-spin-button,
+  &::-webkit-inner-spin-button {
     -webkit-appearance: none;
     margin: 0;
   }
-  /* firefox */
-  &[type="number"] {
-    -moz-appearance: textfield;
-  }
 `;

packages/editor-ui-property/property-input-slider/property-input-slider.tsx

@@ -2,34 +2,41 @@ import React from "react";
 import * as Slider from "@radix-ui/react-slider";
 
 export function PropertySliderInput({
+  stopPropagation,
   value,
   min,
   max,
   step,
   onValueChange,
-}: // onValueCommit,
-{
+}: {
+  stopPropagation?: boolean;
   value?: number[];
   min?: number;
   max?: number;
   step?: number;
   orientation?: "horizontal" | "vertical";
   onValueChange?: (value: number[]) => void;
-  // onValueCommit?: (value: number[]) => void;
 }) {
   return (
     <Slider.Root
-      className="SliderRoot"
+      className="w-full h-6 rounded-md relative overflow-hidden focus:ring focus:ring-blue-500 focus:ring-opacity-50"
       value={value}
       min={min}
       max={max}
       step={step}
+      onKeyDown={
+        stopPropagation
+          ? (event) => {
+              event.stopPropagation();
+            }
+          : undefined
+      }
       onValueChange={onValueChange}
     >
-      <Slider.Track className="SliderTrack">
-        <Slider.Range className="SliderRange" />
+      <Slider.Track className="absolute bg-gray-300 rounded h-1 left-0 right-0">
+        <Slider.Range className="absolute bg-blue-500 rounded h-full" />
       </Slider.Track>
-      <Slider.Thumb className="SliderThumb" aria-label="Volume" />
+      <Slider.Thumb className="block w-4 h-4 bg-white border border-gray-400 rounded-full shadow focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-opacity-50" />
     </Slider.Root>
   );
 }

packages/editor-ui-property/property-input/property-input.tsx

@@ -1,5 +1,5 @@
 import styled from "../theme/styled";
-import React from "react";
+import React, { useEffect } from "react";
 
 import { PropertyCell } from "../property-cell";
 import { useTheme } from "../theme";
@@ -52,6 +52,10 @@ export function PropertyInput({
   const theme = useTheme();
   const inputRef = React.useRef<HTMLInputElement>(null);
 
+  useEffect(() => {
+    setValue(initial);
+  }, [initial]);
+
   const onclick = (e) => {
     if (inputRef.current) {
       inputRef.current.focus();
@@ -187,7 +191,7 @@ const PlainInput = styled.input`
     color: #999;
   }
 
-  /* input_type_number_disable_browser_default_appearence */
+  ${input_type_number_disable_browser_default_appearence}
 `;
 
 const _fix = css`

packages/editor-ui-property/property-line/property-line.tsx

@@ -4,14 +4,22 @@ export function PropertyLine({
   label,
   children,
   onClick,
+  gap = 8,
 }: React.PropsWithChildren<{
   label?: string;
+  gap?: number;
   onClick?: (e) => void;
 }>) {
   return (
     <Line onClick={onClick}>
       {label && <Label>{label}</Label>}
-      <Items>{children}</Items>
+      <Items
+        style={{
+          gap,
+        }}
+      >
+        {children}
+      </Items>
     </Line>
   );
 }
@@ -25,7 +33,6 @@ const Line = styled.div`
 const Items = styled.div`
   display: flex;
   flex: 7;
-  gap: 8px;
 `;
 
 const Label = styled.label`