enhance slider

package.json

@@ -68,6 +68,7 @@
     "@radix-ui/react-menubar": "1.0.4",
     "@radix-ui/react-popover": "1.0.7",
     "@radix-ui/react-select": "2.0.0",
+    "@radix-ui/react-slider": "^1.1.2",
     "@radix-ui/react-switch": "1.0.3",
     "@radix-ui/react-tooltip": "1.0.7",
     "@re-path/react-color": "2.19.4",

src/renderer/attribute/color.cljs

@@ -33,4 +33,4 @@
       [:> ChromePicker
        {:color (or v "")
         :on-change-complete #(rf/dispatch [:element/set-attr k (.-hex %)])
-        :on-change #(rf/dispatch [:element/preview-attribute k (.-hex %)])}]]]]])
+        :on-change #(rf/dispatch [:element/preview-attr k (.-hex %)])}]]]]])

src/renderer/attribute/length.cljs

@@ -37,16 +37,16 @@
      :placeholder (if v initial "multiple")
      :on-wheel (fn [e]
                  (if (pos? (.-deltaY e))
-                   (rf/dispatch [:element/dec-attribute k])
-                   (rf/dispatch [:element/inc-attribute k])))}]
+                   (rf/dispatch [:element/dec-attr k])
+                   (rf/dispatch [:element/inc-attr k])))}]
    [:div.flex {:style {:width "54px"}}
     [:button.button.ml-px.bg-primary.text-muted
      {:style {:width "26px" :height "26px"}
-      :on-pointer-down #(rf/dispatch [:element/dec-attribute k])}
+      :on-pointer-down #(rf/dispatch [:element/dec-attr k])}
      [comp/icon "minus" {:class "small"}]]
     [:button.button..ml-px.bg-primary.text-muted
      {:style {:width "26px" :height "26px"}
-      :on-click #(rf/dispatch [:element/inc-attribute k])}
+      :on-click #(rf/dispatch [:element/inc-attr k])}
      [comp/icon "plus" {:class "small"}]]]])
 
 (defmethod hierarchy/update-attr ::length

src/renderer/attribute/views.cljs

@@ -2,6 +2,7 @@
   (:require
    ["@radix-ui/react-hover-card" :as HoverCard]
    ["@radix-ui/react-select" :as Select]
+   ["@radix-ui/react-slider" :as Slider]
    [clojure.string :as str]
    [config]
    [platform]
@@ -70,7 +71,7 @@
      (when-not (= new-v old-v)
        (rf/dispatch [(if finalize?
                        :element/set-attr
-                       :element/preview-attribute) k new-v])))))
+                       :element/preview-attr) k new-v])))))
 
 (defn form-input
   [{:keys [key value disabled? placeholder on-wheel]}]
@@ -103,12 +104,15 @@
                 :value v
                 :disabled? (:disabled attrs)
                 :placeholder initial}]
-   [:input.ml-px
-    (merge attrs
-           {:value (if (= "" v) initial v)
-            :type "range"
-            :on-change #(on-change-handler % k v false)
-            :on-pointer-up #(rf/dispatch [:element/set-attr k v])})]])
+   [:div.ml-px.px-1.w-full.bg-primary
+    [:> Slider/Root
+     (merge attrs {:class "slider-root"
+                   :value [(if (= "" v) initial v)]
+                   :onValueChange (fn [[v]] (rf/dispatch [:element/preview-attr k v]))
+                   :onValueCommit (fn [[v]] (rf/dispatch [:element/set-attr k v]))})
+     [:> Slider/Track {:class "slider-track"}
+      [:> Slider/Range {:class "slider-range"}]]
+     [:> Slider/Thumb {:class "slider-thumb"}]]]])
 
 (defn select-input
   [{:keys [key value disabled? items initial]}]

src/renderer/element/events.cljs

@@ -75,21 +75,21 @@
        (history.h/finalize "Remove " (name k)))))
 
 (rf/reg-event-db
- :element/inc-attribute
+ :element/inc-attr
  (fn [db [_ k]]
    (-> db
        (h/update-attr k inc)
        (history.h/finalize "Increase " (name k)))))
 
 (rf/reg-event-db
- :element/dec-attribute
+ :element/dec-attr
  (fn [db [_ k]]
    (-> db
        (h/update-attr k dec)
        (history.h/finalize "Decrease " (name k)))))
 
 (rf/reg-event-db
- :element/preview-attribute
+ :element/preview-attr
  (fn [db [_ k v]]
    (h/set-attr db k v)))
 

src/renderer/styles.css

@@ -173,33 +173,6 @@ input {
   }
 }
 
-input[type=range] {
-  @apply m-0 bg-primary appearance-none;
-  padding: 5px;
-
-  &:focus {
-    outline: none;
-  }
-
-  &:hover {
-    cursor: col-resize;
-  }
-}
-
-input[type=range] {
-  &::-webkit-slider-runnable-track {
-    @apply border-0 rounded-none bg-secondary;
-    height: 16px;
-  }
-
-  &::-webkit-slider-thumb {
-    @apply border-0 rounded-none mt-0 appearance-none;
-    height: 16px;
-    width: 4px;
-    background: var(--font-color);
-  }
-}
-
 textarea {
   @apply form-element w-full;
   resize: none;
@@ -525,3 +498,32 @@ pre {
   @apply h-auto;
   background: transparent;
 }
+
+.slider-root {
+  @apply relative flex items-center select-none w-full touch-none h-full;
+}
+
+.slider-track {
+  @apply relative h-full bg-secondary flex-1;
+  height: 4px;
+}
+
+.slider-range {
+  @apply absolute h-full overlay;
+}
+
+.slider-thumb {
+  @apply flex shadow h-full rounded-sm;
+  background-color: var(--font-color-muted);
+  width: 8px;
+  height: 20px;
+
+  &:hover {
+    background-color: var(--font-color);
+  }
+
+  &:focus {
+    @apply outline-none bg-accent;
+    background-color: var(--font-color-active);
+  }
+}

src/renderer/theme/styles.css

@@ -50,7 +50,6 @@
 
     --border-color: rgba(0, 0, 0, .15);
 
-
     --text-error: #962121;
     --text-warning: #a56a00;
     --text-success: #1c611c;