feat(editor): added working number input with range slider

Author: Jonnx

app/View/Components/Editor/InputRange.php

@@ -0,0 +1,42 @@
+<?php
+
+namespace App\View\Components\Editor;
+
+use Illuminate\View\Component;
+
+class InputRange extends Component
+{
+    public $changeEvent;
+
+    public $defaultValue;
+
+    public $min;
+
+    public $max;
+
+    public $step;
+
+    /**
+     * Create a new component instance.
+     *
+     * @return void
+     */
+    public function __construct($changeEvent, $default, $min = 0, $max = 100, $step = 1)
+    {
+        $this->changeEvent = $changeEvent;
+        $this->defaultValue = $default;
+        $this->min = $min;
+        $this->max = $max;
+        $this->step = $step;
+    }
+
+    /**
+     * Get the view / contents that represent the component.
+     *
+     * @return \Illuminate\Contracts\View\View|\Closure|string
+     */
+    public function render()
+    {
+        return view('components.editor.input-range');
+    }
+}

resources/views/components/editor.blade.php

@@ -2,6 +2,7 @@
     <div class="grid grid-cols-1 lg:grid-cols-3 gap-12"
     @icon-changed.window="iconName = $event.detail"
     @color-changed.window="color = $event.detail.replace('#', '')"
+    @size-changed.window="size = $event.detail"
     x-data="Editor()">
 
         <div class="md:col-span-2 text-left p-10 rounded-lg" style="background: linear-gradient(145deg, #0f0f10, #171719, #171719, #171719);">
@@ -23,6 +24,7 @@
 
                     <x-editor.input-icon-select change-event="icon-changed" />
                     <x-editor.input-color-select change-event="color-changed" default="#333" />
+                    <x-editor.input-range change-event="size-changed" default="50" />
                 </div>
 
                 {{-- PIN WITH ICON --}}
@@ -46,7 +48,7 @@
             <h2 class="font-bold text-xl mb-4">Preview</h2>
 
             <div class="bg-gray-200 p-12 rounded-lg">
-                <img x-cloak :src="iconUrl()" :height="size+'px'" :width="size+'px'" alt="Preview" class="block mx-auto" />
+                <img x-cloak :src="iconUrl()" alt="Preview" class="block mx-auto" />
             </div>
 
             <div x-text="'Test: '+iconUrl()" class="text-white"></div>
@@ -57,13 +59,13 @@
 <script>
     function Editor() {
        return {
-            size: 100,
+            size: 50,
             iconName: 'fa-solid fa-map-location',
             color: '333',
             experience: 'icon',
 
             iconUrl() {
-                return '/api/v3/font-awesome/v6/icon?size=100&icon='+this.iconName+'&color='+this.color;
+                return '/api/v3/font-awesome/v6/icon?size='+this.size+'&icon='+this.iconName+'&color='+this.color;
             }
         }
     }

resources/views/components/editor/input-range.blade.php

@@ -0,0 +1,22 @@
+<div x-data="InputRange()" class="max-w-screen-xl mx-auto">
+
+    Text Input:<br />
+    <input class="w-full border" type="input" x-model="value" />
+
+    Range Input:<br />
+    <input class="w-full" type="range" x-model="value" min="{{ $min }}" max="{{ $max }}" step="{{ $step }}" />
+
+</div>
+
+<script>
+    function InputRange() {
+        return {
+            value: {{ $defaultValue }},
+            init() {
+                this.$watch('value', value => {
+                    this.$dispatch('{{ $changeEvent }}', this.value);
+                });
+            }
+        }
+    }
+</script>