nouislider js

bin/build.js

@@ -113,6 +113,7 @@ const formComponents = [
     'markdown-editor',
     'rich-editor',
     'select',
+    'slider',
     'tags-input',
     'textarea',
 ]

package-lock.json

@@ -5,6 +5,9 @@
     "packages": {
         "": {
             "name": "filament",
+            "dependencies": {
+                "wnumb": "^1.2.0"
+            },
             "devDependencies": {
                 "@awcodes/alpine-floating-ui": "^3.4.0",
                 "@babel/runtime": "^7.15.3",
@@ -41,6 +44,7 @@
                 "laravel-mix": "^6.0.37",
                 "luxon": "^3.4.3",
                 "mime": "^4.0.4",
+                "nouislider": "^15.8.1",
                 "npm-run-all": "^4.1.5",
                 "postcss": "^8.4.4",
                 "postcss-nesting": "^13.0.0",
@@ -8156,6 +8160,13 @@
                 "url": "https://github.com/sponsors/sindresorhus"
             }
         },
+        "node_modules/nouislider": {
+            "version": "15.8.1",
+            "resolved": "https://registry.npmjs.org/nouislider/-/nouislider-15.8.1.tgz",
+            "integrity": "sha512-93TweAi8kqntHJSPiSWQ1o/uZ29VWOmal9YKb6KKGGlCkugaNfAupT7o1qTHqdJvNQ7S0su5rO6qRFCjP8fxtw==",
+            "dev": true,
+            "license": "MIT"
+        },
         "node_modules/npm-run-all": {
             "version": "4.1.5",
             "resolved": "https://registry.npmjs.org/npm-run-all/-/npm-run-all-4.1.5.tgz",
@@ -12040,6 +12051,12 @@
             "integrity": "sha512-CC1bOL87PIWSBhDcTrdeLo6eGT7mCFtrg0uIJtqJUFyK+eJnzl8A1niH56uu7KMa5XFrtiV+AQuHO3n7DsHnLQ==",
             "dev": true
         },
+        "node_modules/wnumb": {
+            "version": "1.2.0",
+            "resolved": "https://registry.npmjs.org/wnumb/-/wnumb-1.2.0.tgz",
+            "integrity": "sha512-eYut5K/dW7usfk/Mwm6nxBNoTPp/uP7PlXld+hhg7lDtHLdHFnNclywGYM9BRC7Ohd4JhwuHg+vmOUGfd3NhVA==",
+            "license": "MIT"
+        },
         "node_modules/wrap-ansi": {
             "version": "7.0.0",
             "resolved": "https://registry.npmjs.org/wrap-ansi/-/wrap-ansi-7.0.0.tgz",

package.json

@@ -51,6 +51,7 @@
         "laravel-mix": "^6.0.37",
         "luxon": "^3.4.3",
         "mime": "^4.0.4",
+        "nouislider": "^15.8.1",
         "npm-run-all": "^4.1.5",
         "postcss": "^8.4.4",
         "postcss-nesting": "^13.0.0",
@@ -63,6 +64,7 @@
         "tippy.js": "^6.3.7",
         "trix": "^2.1",
         "uuid-browser": "^3.1.0",
-        "vanilla-colorful": "^0.7.2"
+        "vanilla-colorful": "^0.7.2",
+        "wnumb": "^1.2.0"
     }
 }

packages/forms/resources/css/components/slider.css

@@ -0,0 +1,10 @@
+@import 'nouislider/dist/nouislider.css';
+
+.noUi-connect {
+    --tw-bg-opacity: 1;
+    background: rgba(var(--primary-500), var(--tw-bg-opacity));
+}
+
+.fi-slider-vh {
+    height: 10rem;
+}

packages/forms/resources/js/components/slider.js

@@ -0,0 +1,58 @@
+import noUiSlider from 'nouislider'
+import wNumb from 'wnumb'
+
+// Expose wNumb library to the window object
+window.wNumb = wNumb
+
+export default function sliderFormComponent({
+    state,
+    range,
+    step,
+    start,
+    margin,
+    limit,
+    connect,
+    direction,
+    orientation,
+    behaviour,
+    tooltips,
+    format,
+    pips,
+    ariaFormat,
+}) {
+    return {
+        state,
+
+        slider: null,
+
+        init: function () {
+            this.slider = noUiSlider.create(this.$el, {
+                start: start,
+                range: range,
+                step: step,
+                margin: margin,
+                limit: limit,
+                connect: connect,
+                direction: direction,
+                orientation: orientation,
+                behaviour: behaviour,
+                tooltips: tooltips,
+                format: format,
+                pips: pips,
+                ariaFormat: ariaFormat,
+            })
+
+            // Set the initial value of the slider
+            if (![null, undefined, ''].includes(this.state)) {
+                this.slider.set(this.state)
+            }
+
+            this.slider.on(
+                'update',
+                (values, handle, unencoded, tap, positions, noUiSlider) => {
+                    this.state = values ?? null
+                },
+            )
+        },
+    }
+}