From 26b5b667fdd9a1f84382080fcf2563b7e9665d08 Mon Sep 17 00:00:00 2001
From: Rickard Osser <ricky@osser.se>
Date: Tue, 27 Aug 2024 12:21:59 +0200
Subject: [PATCH 01/30] Added Slider Form-control.

---
 demos/form-control/Slider.php | 215 ++++++++++++++++++++++++++++++++++
 1 file changed, 215 insertions(+)
 create mode 100755 demos/form-control/Slider.php

diff --git a/demos/form-control/Slider.php b/demos/form-control/Slider.php
new file mode 100755
index 0000000000..dd54640d60
--- /dev/null
+++ b/demos/form-control/Slider.php
@@ -0,0 +1,215 @@
+<?php
+
+declare(strict_types=1);
+
+namespace Atk4\Ui\Form\Control;
+
+use Atk4\Ui\View;
+use Atk4\Ui\Js\JsExpression;
+use Atk4\Ui\Js\JsFunction;
+use Atk4\Ui\Js\JsReload;
+
+class Slider extends Input
+{
+    public string $inputType = 'hidden';
+
+    /** The lowest value the slider can be. */
+    public int $min = 0;
+
+    /** The max value the slider can be. */
+    public int $max = 10;
+
+    /** @var float|null The slider step. Set to 0 to disable step. */
+    public $step = 0;
+
+    /** The value the slider will start at. */
+    public int $start = 0;
+
+    /** @var int|null The second value to set in case of a range slider. */
+    public $end = null;
+
+    /** @var int|false Makes sure that the two thumbs of a range slider always need to have a difference of the given value. */
+    public $minRange = false;
+
+    /**  @var int|false Makes sure that the two thumbs of a range slider don't exceed a difference of the given value. */
+    public $maxRange = false;
+
+    /** @var 'number'|'letter' The type of label to display for a labeled slider. Can be number or letter. */
+    public $labelType = 'number';
+
+    /** @var array|null An array of label values which restrict the displayed labels to only those which are defined. */
+    public $restrictedLabels = null;
+
+    /** Whether a tooltip should be shown to the thumb(s) on hover. Will contain the current slider value. */
+    public bool $showThumbTooltip = false;
+    
+    /**
+     * Tooltip configuration used when showThumbTooltip is true
+     * Refer to Tooltip Variations for possible values.
+     *
+     * @var array|null
+     */
+    public $tooltipConfig = null;
+
+    /**
+     * Show ticks on a labeled slider.
+     *'always'will always show the ticks for all labels (even if not shown)
+     * true will display the ticks only if the related label is also shown.
+     *
+     * @var 'always'|bool
+     */
+    public $showLabelTicks = false;
+
+    /** Define smoothness when the slider is moving. */
+    public bool $smooth = false;
+
+    /** Whether labels should auto adjust on window resize. */
+    public bool $autoAdjustLabels = true;
+
+    /** The distance between labels. */
+    public int $labelDistance = 100;
+
+    /** Number of decimals to use with an unstepped slider. */
+    public int $decimalPlaces = 2;
+
+    /** Page up/down multiplier. Define how many more times the steps to take on page up/down press. */
+    public int $pageMultiplier = 2;
+
+    /** Prevents the lower thumb to crossover the thumb handle. */
+    public bool $preventCrossover = true;
+
+    /** Settings for the slider-class */
+    /** Whether the slider should be ticked or not. */
+    public bool $ticked = false;
+
+    /** Whether the slider should be labeled or not. */
+    public bool $labeled = false;
+
+    /** Whether the ticks and labels should be at the bottom. */
+    public bool $bottom = false;
+
+    /** @var object */
+    private $slider;
+
+    /** @var object */
+    private $owner;
+
+    /** @var object */
+    private $firstInput;
+
+    /** @var object */
+    private $secondInput;
+    
+    #[\Override]
+    protected function init(): void
+    {
+        parent::init();
+
+        $this->owner = $this->getOwner();
+
+        $this->slider = View::addTo($this->owner)->addClass('ui slider');
+
+        if ($this->end) {
+            $this->slider->addClass('range');
+        }
+
+        if ($this->ticked) {
+            $this->slider->addClass('ticked');
+        }
+
+        if ($this->labeled) {
+            $this->slider->addClass('labeled');
+        }
+
+        if ($this->bottom) {
+            $this->slider->addClass('bottom aligned');
+        }
+
+        $sliderSettings = [];
+        $sliderSettings = $sliderSettings + ['min' => $this->min];
+        $sliderSettings = $sliderSettings + ['max' => $this->max];
+        if ($this->start) {
+            $sliderSettings = $sliderSettings + ['start' => $this->start];
+        }
+        if ($this->step) {
+            $sliderSettings = $sliderSettings + ['step' => $this->step];
+        }
+        if ($this->end) {
+            $sliderSettings = $sliderSettings + ['end' => $this->end];
+            if ($this->minRange) {
+                $sliderSettings = $sliderSettings + ['minRange' => $this->minRange];
+            }
+            if ($this->maxRange) {
+                $sliderSettings = $sliderSettings + ['maxRange' => $this->maxRange];
+            }
+        }
+        $sliderSettings = $sliderSettings + ['labelType' => $this->labelType];
+        if ($this->restrictedLabels) {
+            $sliderSettings = $sliderSettings + ['restrictedLabels' => $this->restrictedLabels];
+        }
+        if ($this->showThumbTooltip) {
+            $sliderSettings = $sliderSettings + ['showThumbTooltip' => $this->showThumbTooltip];
+            if ($this->tooltipConfig) {
+                $sliderSettings = $sliderSettings + ['tooltipConfig' => $this->tooltipConfig];
+            }
+        }
+        $sliderSettings = $sliderSettings + ['showLabelTicks' => $this->showLabelTicks];
+        $sliderSettings = $sliderSettings + ['smooth' => $this->smooth];
+        $sliderSettings = $sliderSettings + ['autoAdjustLabels' => $this->autoAdjustLabels];
+        $sliderSettings = $sliderSettings + ['labelDistance' => $this->labelDistance];
+        $sliderSettings = $sliderSettings + ['decimalPlaces' => $this->decimalPlaces];
+        $sliderSettings = $sliderSettings + ['pageMultiplier' => $this->pageMultiplier];
+        $sliderSettings = $sliderSettings + ['decimalPlaces' => $this->decimalPlaces];
+        $sliderSettings = $sliderSettings + ['preventCrossover' => $this->preventCrossover];
+        
+        /*
+         * First input value, always present
+         */
+        $this->firstInput = $this->owner->addControl(
+            $this->shortName . '_first',
+            [
+                Hidden::class
+            ]
+        )->set($this->start);
+
+        $onChange = [
+            'onChange' => new JsFunction(
+                ['v'],
+                [
+                    new JsExpression($this->firstInput->js()->find('input')->jsRender().".val($('div#" . $this->slider->getHtmlId() . "').slider('get thumbValue', 'first'))"),
+                ])
+        ];
+        
+        /*
+         * Second input value, optional, depending on $this->end
+         */
+        if ($this->end) {
+            $this->secondInput = $this->owner->addControl(
+                $this->shortName . '_second',
+                [
+                    Hidden::class
+                ]
+            )->set($this->end);
+            
+            $onChange = [
+                'onChange' => new JsFunction(
+                    ['v'],
+                    [
+                        new JsExpression($this->firstInput->js()->find('input')->jsRender().".val($('div#" . $this->slider->getHtmlId() . "').slider('get thumbValue', 'first'))"),
+                        new JsExpression($this->secondInput->js()->find('input')->jsRender().".val($('div#" . $this->slider->getHtmlId() . "').slider('get thumbValue', 'second'))")
+                    ])
+            ];
+        }
+        $sliderSettings = $sliderSettings + $onChange;
+
+        $this->slider->js(true)->slider(
+            $sliderSettings,
+        );
+    }
+
+    #[\Override]
+    protected function recursiveRender(): void
+    {
+        parent::recursiveRender();
+    }
+}

From 523826d7dcd63a454e9a7f017241ea7a9626a68e Mon Sep 17 00:00:00 2001
From: Rickard Osser <ricky@osser.se>
Date: Tue, 27 Aug 2024 17:40:57 +0200
Subject: [PATCH 02/30] Added demo to input2.php.

---
 demos/form-control/input2.php                 |  53 ++++
 demos/form-control/{Slider.php => slider.php} |   0
 src/Form/Control/Slider.php                   | 252 ++++++++++++++++++
 3 files changed, 305 insertions(+)
 rename demos/form-control/{Slider.php => slider.php} (100%)
 mode change 100755 => 100644
 create mode 100644 src/Form/Control/Slider.php

diff --git a/demos/form-control/input2.php b/demos/form-control/input2.php
index 25af84c1ac..f08fe53bc7 100644
--- a/demos/form-control/input2.php
+++ b/demos/form-control/input2.php
@@ -53,6 +53,59 @@
 $group->addControl('radio_read', [Form\Control\Radio::class, 'readOnly' => true], ['enum' => ['one', 'two', 'three']])->set('two');
 $group->addControl('radio_disb', [Form\Control\Radio::class, 'disabled' => true], ['enum' => ['one', 'two', 'three']])->set('two');
 
+$group = $form->addGroup('Sliders');
+
+$form->addControl(
+    'slider_norm',
+    [
+        Form\Control\Slider::class,
+        'labeled' => true,
+        'ticked' => true,
+        'bottom' => true,
+        'min' => 0,
+        'max' => 1,
+        'step' => 0.1,
+        'start' => 0.5,
+        'smooth' => true,
+        'caption' => 'Normal Slider'
+    ]
+);
+
+$form->addControl(
+    'slider_read',
+    [
+        Form\Control\Slider::class,
+        'readOnly' => true,
+        'labeled' => true,
+        'ticked' => true,
+        'bottom' => false,
+        'min' => 1,
+        'max' => 5,
+        'step' => 1,
+        'start' => 2,
+        'smooth' => true,
+        'color' => 'red',
+        'caption' => 'Read Only Slider'
+    ]
+);
+
+$form->addControl(
+    'slider_disb',
+    [
+        Form\Control\Slider::class,
+        'disabled' => true,
+        'labeled' => true,
+        'ticked' => true,
+        'bottom' => false,
+        'min' => 1,
+        'max' => 10,
+        'step' => 1,
+        'start' => 5,
+        'smooth' => true,
+        'caption' => 'Disabled Slider'
+    ]
+);
+
 $group = $form->addGroup('File upload');
 
 $onDelete = static function () {};
diff --git a/demos/form-control/Slider.php b/demos/form-control/slider.php
old mode 100755
new mode 100644
similarity index 100%
rename from demos/form-control/Slider.php
rename to demos/form-control/slider.php
diff --git a/src/Form/Control/Slider.php b/src/Form/Control/Slider.php
new file mode 100644
index 0000000000..bf6cb72fda
--- /dev/null
+++ b/src/Form/Control/Slider.php
@@ -0,0 +1,252 @@
+<?php
+
+declare(strict_types=1);
+
+namespace Atk4\Ui\Form\Control;
+
+use Atk4\Ui\View;
+use Atk4\Ui\Js\JsExpression;
+use Atk4\Ui\Js\JsFunction;
+use Atk4\Ui\Js\JsReload;
+
+class Slider extends Input
+{
+    public string $inputType = 'hidden';
+
+    /** The lowest value the slider can be. */
+    public float $min = 0;
+
+    /** The max value the slider can be. */
+    public float $max = 10;
+
+    /** @var float|null The slider step. Set to 0 to disable step. */
+    public $step = 0;
+
+    /** The value the slider will start at. */
+    public float $start = 0;
+
+    /** @var float|null The second value to set in case of a range slider. */
+    public $end = null;
+
+    /** @var float|false Makes sure that the two thumbs of a range slider always need to have a difference of the given value. */
+    public $minRange = false;
+
+    /**  @var float|false Makes sure that the two thumbs of a range slider don't exceed a difference of the given value. */
+    public $maxRange = false;
+
+    /** @var 'number'|'letter' The type of label to display for a labeled slider. Can be number or letter. */
+    public $labelType = 'number';
+
+    /** @var array|null An array of label values which restrict the displayed labels to only those which are defined. */
+    public $restrictedLabels = null;
+
+    /** Whether a tooltip should be shown to the thumb(s) on hover. Will contain the current slider value. */
+    public bool $showThumbTooltip = false;
+    
+    /**
+     * Tooltip configuration used when showThumbTooltip is true
+     * Refer to Tooltip Variations for possible values.
+     *
+     * @var array|null
+     */
+    public $tooltipConfig = null;
+
+    /**
+     * Show ticks on a labeled slider.
+     *'always'will always show the ticks for all labels (even if not shown)
+     * true will display the ticks only if the related label is also shown.
+     *
+     * @var 'always'|bool
+     */
+    public $showLabelTicks = false;
+
+    /** Define smoothness when the slider is moving. */
+    public bool $smooth = false;
+
+    /** Whether labels should auto adjust on window resize. */
+    public bool $autoAdjustLabels = true;
+
+    /** The distance between labels. */
+    public int $labelDistance = 100;
+
+    /** Number of decimals to use with an unstepped slider. */
+    public int $decimalPlaces = 2;
+
+    /** Page up/down multiplier. Define how many more times the steps to take on page up/down press. */
+    public int $pageMultiplier = 2;
+
+    /** Prevents the lower thumb to crossover the thumb handle. */
+    public bool $preventCrossover = true;
+
+    /** Settings for the slider-class */
+    /** Whether the slider should be ticked or not. */
+    public bool $ticked = false;
+
+    /** Whether the slider should be labeled or not. */
+    public bool $labeled = false;
+
+    /** Whether the ticks and labels should be at the bottom. */
+    public bool $bottom = false;
+
+    /** Whether the ticks and labels should be at the bottom. */
+    public bool $vertical = false;
+
+    /** @var string|null Color of the slider. */
+    public $color = null;
+
+    /** @var object|view */
+    private $slider;
+
+    /** @var object */
+    private $owner;
+
+    /** @var object */
+    private $firstInput;
+
+    /** @var object */
+    private $secondInput;
+    
+    #[\Override]
+    protected function init(): void
+    {
+        parent::init();
+        //print_r(parent::class());
+        $this->owner = $this->getOwner();
+
+        $this->slider = View::addTo($this->owner)->addClass('ui slider');
+
+        if ($this->end) {
+            $this->slider->addClass('range');
+        }
+
+        if ($this->ticked) {
+            $this->slider->addClass('ticked');
+        }
+
+        if ($this->labeled) {
+            $this->slider->addClass('labeled');
+        }
+
+        if ($this->bottom) {
+            $this->slider->addClass('bottom aligned');
+        }
+
+        if ($this->vertical) {
+            $this->slider->addClass('vertical');
+        }
+
+        if($this->color) {
+            $this->slider->addClass($this->color);
+        }
+        
+        $sliderSettings = [];
+        $sliderSettings = $sliderSettings + ['min' => $this->min];
+        $sliderSettings = $sliderSettings + ['max' => $this->max];
+        if ($this->start) {
+            $sliderSettings = $sliderSettings + ['start' => $this->start];
+        }
+        if ($this->step) {
+            $sliderSettings = $sliderSettings + ['step' => $this->step];
+        }
+        if ($this->end) {
+            $sliderSettings = $sliderSettings + ['end' => $this->end];
+            if ($this->minRange) {
+                $sliderSettings = $sliderSettings + ['minRange' => $this->minRange];
+            }
+            if ($this->maxRange) {
+                $sliderSettings = $sliderSettings + ['maxRange' => $this->maxRange];
+            }
+        }
+        $sliderSettings = $sliderSettings + ['labelType' => $this->labelType];
+        if ($this->restrictedLabels) {
+            $sliderSettings = $sliderSettings + ['restrictedLabels' => $this->restrictedLabels];
+        }
+        if ($this->showThumbTooltip) {
+            $sliderSettings = $sliderSettings + ['showThumbTooltip' => $this->showThumbTooltip];
+            if ($this->tooltipConfig) {
+                $sliderSettings = $sliderSettings + ['tooltipConfig' => $this->tooltipConfig];
+            }
+        }
+        $sliderSettings = $sliderSettings + ['showLabelTicks' => $this->showLabelTicks];
+        $sliderSettings = $sliderSettings + ['smooth' => $this->smooth];
+        $sliderSettings = $sliderSettings + ['autoAdjustLabels' => $this->autoAdjustLabels];
+        $sliderSettings = $sliderSettings + ['labelDistance' => $this->labelDistance];
+        $sliderSettings = $sliderSettings + ['decimalPlaces' => $this->decimalPlaces];
+        $sliderSettings = $sliderSettings + ['pageMultiplier' => $this->pageMultiplier];
+        $sliderSettings = $sliderSettings + ['decimalPlaces' => $this->decimalPlaces];
+        $sliderSettings = $sliderSettings + ['preventCrossover' => $this->preventCrossover];
+        
+        if($this->disabled) {
+            $this->slider->addClass('disabled');
+        }
+
+        /*
+         * First input value, always present
+         */
+        $this->firstInput = $this->owner->addControl(
+            $this->shortName . '_first',
+            [
+                Hidden::class
+            ]
+        )->set($this->start);
+
+        $onChange = [
+            'onChange' => new JsFunction(
+                ['v'],
+                [
+                    new JsExpression(
+                        $this->firstInput->js()->find('input')->jsRender() . '.val($(\'div#\' + [] + \'\').slider(\'get thumbValue\', \'first\'))',
+                        [$this->slider->getHtmlId()]
+                    ),
+                ])
+        ];
+        
+        /*
+         * Second input value, optional, depending on $this->end
+         */
+        if ($this->end) {
+            $this->secondInput = $this->owner->addControl(
+                $this->shortName . '_second',
+                [
+                    Hidden::class
+                ]
+            )->set($this->end);
+            
+            $onChange = [
+                'onChange' => new JsFunction(
+                    ['v'],
+                    [
+                        new JsExpression(
+                            $this->firstInput->js()->find('input')->jsRender() . '.val($(\'div#\' + [] + \'\').slider(\'get thumbValue\', \'first\'))',
+                            [$this->slider->getHtmlId()]
+                        ),
+                        new JsExpression(
+                            $this->secondInput->js()->find('input')->jsRender() . '.val($(\'div#\' + [] + \'\').slider(\'get thumbValue\', \'second\'))',
+                            [$this->slider->getHtmlId()]
+                        ),
+                    ])
+            ];
+        }
+        if($this->readOnly) {
+            $this->firstInput->addClass('readOnly');
+            $this->firstInput->setAttr(['readOnly' => 'readOnly']);
+        }
+        
+        $sliderSettings = $sliderSettings + $onChange;
+
+        $this->slider->js(true)->slider(
+            $sliderSettings,
+        );
+    }
+
+    #[\Override]
+    protected function recursiveRender(): void
+    {
+        parent::recursiveRender();
+
+        //print_r(get_object_vars($this));
+        //print_r(get_class_methods($this));
+        //print $this->parent;
+
+    }
+}

From f20ffd57d112e7a6aa93dcb4950bfdb5f557269a Mon Sep 17 00:00:00 2001
From: Rickard Osser <ricky@osser.se>
Date: Wed, 28 Aug 2024 11:19:36 +0200
Subject: [PATCH 03/30] Fixed a bunch of things regarding adding data to the 
 array as well as implement readOnly and disabled. Fixed so that class-data
 can be used on the slider from the code.

---
 demos/form-control/input2.php |   8 +-
 src/Form/Control/Slider.php   | 152 ++++++++++++++++++----------------
 2 files changed, 88 insertions(+), 72 deletions(-)

diff --git a/demos/form-control/input2.php b/demos/form-control/input2.php
index f08fe53bc7..c6fd4cb0a6 100644
--- a/demos/form-control/input2.php
+++ b/demos/form-control/input2.php
@@ -84,12 +84,12 @@
         'step' => 1,
         'start' => 2,
         'smooth' => true,
-        'color' => 'red',
+        'color' => 'yellow',
         'caption' => 'Read Only Slider'
     ]
 );
 
-$form->addControl(
+$disabledSlider = $form->addControl(
     'slider_disb',
     [
         Form\Control\Slider::class,
@@ -105,6 +105,10 @@
         'caption' => 'Disabled Slider'
     ]
 );
+/**
+ * We can add classes to a slider by doing:
+ */
+$disabledSlider->slider->addClass('red');
 
 $group = $form->addGroup('File upload');
 
diff --git a/src/Form/Control/Slider.php b/src/Form/Control/Slider.php
index bf6cb72fda..0681ca5466 100644
--- a/src/Form/Control/Slider.php
+++ b/src/Form/Control/Slider.php
@@ -94,8 +94,8 @@ class Slider extends Input
     /** @var string|null Color of the slider. */
     public $color = null;
 
-    /** @var object|view */
-    private $slider;
+    /** @var object|View */
+    public $slider;
 
     /** @var object */
     private $owner;
@@ -113,7 +113,8 @@ protected function init(): void
         //print_r(parent::class());
         $this->owner = $this->getOwner();
 
-        $this->slider = View::addTo($this->owner)->addClass('ui slider');
+        $this->slider = View::addTo($this->owner);
+        $this->slider->ui ='ui slider';
 
         if ($this->end) {
             $this->slider->addClass('range');
@@ -135,113 +136,124 @@ protected function init(): void
             $this->slider->addClass('vertical');
         }
 
-        if($this->color) {
+        if ($this->color) {
             $this->slider->addClass($this->color);
         }
         
         $sliderSettings = [];
-        $sliderSettings = $sliderSettings + ['min' => $this->min];
-        $sliderSettings = $sliderSettings + ['max' => $this->max];
+        $sliderSettings['min'] = $this->min;
+        $sliderSettings['max'] = $this->max;
         if ($this->start) {
-            $sliderSettings = $sliderSettings + ['start' => $this->start];
+            $sliderSettings['start'] = $this->start;
         }
         if ($this->step) {
-            $sliderSettings = $sliderSettings + ['step' => $this->step];
+            $sliderSettings['step'] = $this->step;
         }
         if ($this->end) {
-            $sliderSettings = $sliderSettings + ['end' => $this->end];
+            $sliderSettings['end'] = $this->end;
             if ($this->minRange) {
-                $sliderSettings = $sliderSettings + ['minRange' => $this->minRange];
+                $sliderSettings['minRange'] = $this->minRange;
             }
             if ($this->maxRange) {
-                $sliderSettings = $sliderSettings + ['maxRange' => $this->maxRange];
+                $sliderSettings['maxRange'] = $this->maxRange;
             }
         }
-        $sliderSettings = $sliderSettings + ['labelType' => $this->labelType];
+        $sliderSettings['labelType'] = $this->labelType;
         if ($this->restrictedLabels) {
-            $sliderSettings = $sliderSettings + ['restrictedLabels' => $this->restrictedLabels];
+            $sliderSettings['restrictedLabels'] = $this->restrictedLabels;
         }
         if ($this->showThumbTooltip) {
-            $sliderSettings = $sliderSettings + ['showThumbTooltip' => $this->showThumbTooltip];
+            $sliderSettings['showThumbTooltip'] = $this->showThumbTooltip;
             if ($this->tooltipConfig) {
-                $sliderSettings = $sliderSettings + ['tooltipConfig' => $this->tooltipConfig];
+                $sliderSettings['tooltipConfig'] = $this->tooltipConfig;
             }
         }
-        $sliderSettings = $sliderSettings + ['showLabelTicks' => $this->showLabelTicks];
-        $sliderSettings = $sliderSettings + ['smooth' => $this->smooth];
-        $sliderSettings = $sliderSettings + ['autoAdjustLabels' => $this->autoAdjustLabels];
-        $sliderSettings = $sliderSettings + ['labelDistance' => $this->labelDistance];
-        $sliderSettings = $sliderSettings + ['decimalPlaces' => $this->decimalPlaces];
-        $sliderSettings = $sliderSettings + ['pageMultiplier' => $this->pageMultiplier];
-        $sliderSettings = $sliderSettings + ['decimalPlaces' => $this->decimalPlaces];
-        $sliderSettings = $sliderSettings + ['preventCrossover' => $this->preventCrossover];
+        $sliderSettings['showLabelTicks'] = $this->showLabelTicks;
+        $sliderSettings['smooth'] = $this->smooth;
+        $sliderSettings['autoAdjustLabels'] = $this->autoAdjustLabels;
+        $sliderSettings['labelDistance'] = $this->labelDistance;
+        $sliderSettings['decimalPlaces'] = $this->decimalPlaces;
+        $sliderSettings['pageMultiplier'] = $this->pageMultiplier;
+        $sliderSettings['decimalPlaces'] = $this->decimalPlaces;
+        $sliderSettings['preventCrossover'] = $this->preventCrossover;
         
-        if($this->disabled) {
+        if ($this->disabled || $this->readOnly) {
             $this->slider->addClass('disabled');
         }
 
-        /*
-         * First input value, always present
-         */
-        $this->firstInput = $this->owner->addControl(
-            $this->shortName . '_first',
-            [
-                Hidden::class
-            ]
-        )->set($this->start);
-
-        $onChange = [
-            'onChange' => new JsFunction(
-                ['v'],
-                [
-                    new JsExpression(
-                        $this->firstInput->js()->find('input')->jsRender() . '.val($(\'div#\' + [] + \'\').slider(\'get thumbValue\', \'first\'))',
-                        [$this->slider->getHtmlId()]
-                    ),
-                ])
-        ];
-        
-        /*
-         * Second input value, optional, depending on $this->end
-         */
-        if ($this->end) {
-            $this->secondInput = $this->owner->addControl(
-                $this->shortName . '_second',
+        if (!$this->disabled) {
+            /*
+             * First input value, always present
+             */
+            $this->firstInput = $this->owner->addControl(
+                $this->shortName . '_first',
                 [
                     Hidden::class
                 ]
-            )->set($this->end);
+            )->set($this->start);
+
+            if (!$this->readOnly) {
+                $onChange = [
+                    'onChange' => new JsFunction(
+                        ['v'],
+                        [
+                            new JsExpression(
+                                $this->firstInput->js()->find('input')->jsRender() . '.val($(\'div#\' + [] + \'\').slider(\'get thumbValue\', \'first\'))',
+                                [$this->slider->getHtmlId()]
+                            ),
+                        ])
+                ];
+            }
             
-            $onChange = [
-                'onChange' => new JsFunction(
-                    ['v'],
+            /*
+             * Second input value, optional, depending on $this->end
+             */
+            if ($this->end) {
+                $this->secondInput = $this->owner->addControl(
+                    $this->shortName . '_second',
                     [
-                        new JsExpression(
-                            $this->firstInput->js()->find('input')->jsRender() . '.val($(\'div#\' + [] + \'\').slider(\'get thumbValue\', \'first\'))',
-                            [$this->slider->getHtmlId()]
-                        ),
-                        new JsExpression(
-                            $this->secondInput->js()->find('input')->jsRender() . '.val($(\'div#\' + [] + \'\').slider(\'get thumbValue\', \'second\'))',
-                            [$this->slider->getHtmlId()]
-                        ),
-                    ])
-            ];
+                        Hidden::class
+                    ]
+                )->set($this->end);
+
+                if (!$this->readOnly) {
+                    $onChange = [
+                        'onChange' => new JsFunction(
+                            ['v'],
+                            [
+                                new JsExpression(
+                                    $this->firstInput->js()->find('input')->jsRender() . '.val($(\'div#\' + [] + \'\').slider(\'get thumbValue\', \'first\'))',
+                                    [$this->slider->getHtmlId()]
+                                ),
+                                new JsExpression(
+                                    $this->secondInput->js()->find('input')->jsRender() . '.val($(\'div#\' + [] + \'\').slider(\'get thumbValue\', \'second\'))',
+                                    [$this->slider->getHtmlId()]
+                                ),
+                            ])
+                    ];
+                }
+            }
         }
-        if($this->readOnly) {
+        if ($this->readOnly) {
             $this->firstInput->addClass('readOnly');
-            $this->firstInput->setAttr(['readOnly' => 'readOnly']);
+            $this->firstInput->setAttr(['readOnly' => '']);
+        }
+        if (!empty($onChange)) {
+            $sliderSettings = $sliderSettings + $onChange;
         }
-        
-        $sliderSettings = $sliderSettings + $onChange;
-
         $this->slider->js(true)->slider(
             $sliderSettings,
         );
     }
 
+    
     #[\Override]
     protected function recursiveRender(): void
     {
+        /**
+         * Will be removed after testing...
+         */
+
         parent::recursiveRender();
 
         //print_r(get_object_vars($this));

From 1bd2d1f969bb23b15a297017781bbfb41c0ba8bc Mon Sep 17 00:00:00 2001
From: Rickard Osser <ricky@osser.se>
Date: Wed, 28 Aug 2024 13:24:18 +0200
Subject: [PATCH 04/30] Added Slider to demo.

---
 demos/form-control/slider.php | 278 +++++++++-------------------------
 demos/init-app.php            |   1 +
 src/Form/Control/Slider.php   |   4 +-
 3 files changed, 76 insertions(+), 207 deletions(-)

diff --git a/demos/form-control/slider.php b/demos/form-control/slider.php
index dd54640d60..678eb66de4 100644
--- a/demos/form-control/slider.php
+++ b/demos/form-control/slider.php
@@ -2,214 +2,82 @@
 
 declare(strict_types=1);
 
-namespace Atk4\Ui\Form\Control;
+namespace Atk4\Ui\Demos;
 
-use Atk4\Ui\View;
+use Atk4\Ui\App;
+use Atk4\Ui\Form;
+use Atk4\Ui\Header;
 use Atk4\Ui\Js\JsExpression;
-use Atk4\Ui\Js\JsFunction;
-use Atk4\Ui\Js\JsReload;
 
-class Slider extends Input
-{
-    public string $inputType = 'hidden';
 
-    /** The lowest value the slider can be. */
-    public int $min = 0;
 
-    /** The max value the slider can be. */
-    public int $max = 10;
 
-    /** @var float|null The slider step. Set to 0 to disable step. */
-    public $step = 0;
-
-    /** The value the slider will start at. */
-    public int $start = 0;
-
-    /** @var int|null The second value to set in case of a range slider. */
-    public $end = null;
-
-    /** @var int|false Makes sure that the two thumbs of a range slider always need to have a difference of the given value. */
-    public $minRange = false;
-
-    /**  @var int|false Makes sure that the two thumbs of a range slider don't exceed a difference of the given value. */
-    public $maxRange = false;
-
-    /** @var 'number'|'letter' The type of label to display for a labeled slider. Can be number or letter. */
-    public $labelType = 'number';
-
-    /** @var array|null An array of label values which restrict the displayed labels to only those which are defined. */
-    public $restrictedLabels = null;
-
-    /** Whether a tooltip should be shown to the thumb(s) on hover. Will contain the current slider value. */
-    public bool $showThumbTooltip = false;
-    
-    /**
-     * Tooltip configuration used when showThumbTooltip is true
-     * Refer to Tooltip Variations for possible values.
-     *
-     * @var array|null
-     */
-    public $tooltipConfig = null;
-
-    /**
-     * Show ticks on a labeled slider.
-     *'always'will always show the ticks for all labels (even if not shown)
-     * true will display the ticks only if the related label is also shown.
-     *
-     * @var 'always'|bool
-     */
-    public $showLabelTicks = false;
-
-    /** Define smoothness when the slider is moving. */
-    public bool $smooth = false;
-
-    /** Whether labels should auto adjust on window resize. */
-    public bool $autoAdjustLabels = true;
-
-    /** The distance between labels. */
-    public int $labelDistance = 100;
-
-    /** Number of decimals to use with an unstepped slider. */
-    public int $decimalPlaces = 2;
-
-    /** Page up/down multiplier. Define how many more times the steps to take on page up/down press. */
-    public int $pageMultiplier = 2;
-
-    /** Prevents the lower thumb to crossover the thumb handle. */
-    public bool $preventCrossover = true;
-
-    /** Settings for the slider-class */
-    /** Whether the slider should be ticked or not. */
-    public bool $ticked = false;
-
-    /** Whether the slider should be labeled or not. */
-    public bool $labeled = false;
-
-    /** Whether the ticks and labels should be at the bottom. */
-    public bool $bottom = false;
-
-    /** @var object */
-    private $slider;
-
-    /** @var object */
-    private $owner;
-
-    /** @var object */
-    private $firstInput;
-
-    /** @var object */
-    private $secondInput;
-    
-    #[\Override]
-    protected function init(): void
-    {
-        parent::init();
-
-        $this->owner = $this->getOwner();
-
-        $this->slider = View::addTo($this->owner)->addClass('ui slider');
-
-        if ($this->end) {
-            $this->slider->addClass('range');
-        }
-
-        if ($this->ticked) {
-            $this->slider->addClass('ticked');
-        }
-
-        if ($this->labeled) {
-            $this->slider->addClass('labeled');
-        }
-
-        if ($this->bottom) {
-            $this->slider->addClass('bottom aligned');
-        }
-
-        $sliderSettings = [];
-        $sliderSettings = $sliderSettings + ['min' => $this->min];
-        $sliderSettings = $sliderSettings + ['max' => $this->max];
-        if ($this->start) {
-            $sliderSettings = $sliderSettings + ['start' => $this->start];
-        }
-        if ($this->step) {
-            $sliderSettings = $sliderSettings + ['step' => $this->step];
-        }
-        if ($this->end) {
-            $sliderSettings = $sliderSettings + ['end' => $this->end];
-            if ($this->minRange) {
-                $sliderSettings = $sliderSettings + ['minRange' => $this->minRange];
-            }
-            if ($this->maxRange) {
-                $sliderSettings = $sliderSettings + ['maxRange' => $this->maxRange];
-            }
-        }
-        $sliderSettings = $sliderSettings + ['labelType' => $this->labelType];
-        if ($this->restrictedLabels) {
-            $sliderSettings = $sliderSettings + ['restrictedLabels' => $this->restrictedLabels];
-        }
-        if ($this->showThumbTooltip) {
-            $sliderSettings = $sliderSettings + ['showThumbTooltip' => $this->showThumbTooltip];
-            if ($this->tooltipConfig) {
-                $sliderSettings = $sliderSettings + ['tooltipConfig' => $this->tooltipConfig];
-            }
-        }
-        $sliderSettings = $sliderSettings + ['showLabelTicks' => $this->showLabelTicks];
-        $sliderSettings = $sliderSettings + ['smooth' => $this->smooth];
-        $sliderSettings = $sliderSettings + ['autoAdjustLabels' => $this->autoAdjustLabels];
-        $sliderSettings = $sliderSettings + ['labelDistance' => $this->labelDistance];
-        $sliderSettings = $sliderSettings + ['decimalPlaces' => $this->decimalPlaces];
-        $sliderSettings = $sliderSettings + ['pageMultiplier' => $this->pageMultiplier];
-        $sliderSettings = $sliderSettings + ['decimalPlaces' => $this->decimalPlaces];
-        $sliderSettings = $sliderSettings + ['preventCrossover' => $this->preventCrossover];
-        
-        /*
-         * First input value, always present
-         */
-        $this->firstInput = $this->owner->addControl(
-            $this->shortName . '_first',
-            [
-                Hidden::class
-            ]
-        )->set($this->start);
-
-        $onChange = [
-            'onChange' => new JsFunction(
-                ['v'],
-                [
-                    new JsExpression($this->firstInput->js()->find('input')->jsRender().".val($('div#" . $this->slider->getHtmlId() . "').slider('get thumbValue', 'first'))"),
-                ])
-        ];
-        
-        /*
-         * Second input value, optional, depending on $this->end
-         */
-        if ($this->end) {
-            $this->secondInput = $this->owner->addControl(
-                $this->shortName . '_second',
-                [
-                    Hidden::class
-                ]
-            )->set($this->end);
-            
-            $onChange = [
-                'onChange' => new JsFunction(
-                    ['v'],
-                    [
-                        new JsExpression($this->firstInput->js()->find('input')->jsRender().".val($('div#" . $this->slider->getHtmlId() . "').slider('get thumbValue', 'first'))"),
-                        new JsExpression($this->secondInput->js()->find('input')->jsRender().".val($('div#" . $this->slider->getHtmlId() . "').slider('get thumbValue', 'second'))")
-                    ])
-            ];
-        }
-        $sliderSettings = $sliderSettings + $onChange;
-
-        $this->slider->js(true)->slider(
-            $sliderSettings,
-        );
-    }
-
-    #[\Override]
-    protected function recursiveRender(): void
-    {
-        parent::recursiveRender();
-    }
-}
+/** @var App $app */
+require_once __DIR__ . '/../init-app.php';
+
+Header::addTo($app, ['Sliders', 'size' => 2]);
+
+$form = Form::addTo($app);
+
+$form->addControl(
+    'slider_simple1',
+    [
+        Form\Control\Slider::class,
+        'min' => 0,
+        'max' => 10,
+        'step' => 1,
+        'start' => 5,
+        'caption' => 'Simple Slider'
+    ]
+);
+
+$slider2 = $form->addControl(
+    'slider_simple2',
+    [
+        Form\Control\Slider::class,
+        'labeled' => true,
+        'ticked' => true,
+        'min' => 0,
+        'max' => 10,
+        'step' => 1,
+        'start' => 5,
+        'caption' => 'Blue ticked and labeled Simple Slider'
+    ]
+);
+$slider2->slider->addClass('blue');
+
+$form->addControl(
+    'slider_simple3',
+    [
+        Form\Control\Slider::class,
+        'labeled' => true,
+        'ticked' => true,
+        'min' => 0,
+        'max' => 10,
+        'step' => 1,
+        'start' => 5,
+        'smooth' => true,
+        'caption' => 'Smooth Blue ticked and labeled Simple Slider'
+    ]
+);
+
+$form->addControl(
+    'slider_ranged1',
+    [
+        Form\Control\Slider::class,
+        'labeled' => true,
+        'ticked' => true,
+        'min' => 0,
+        'max' => 10,
+        'step' => 1,
+        'start' => 3,
+        'end' => 6,
+        'smooth' => true,
+        'color' => 'blue',
+        'caption' => 'Smooth Blue ticked and labeled Ranged Slider'
+    ]
+);
+
+$form->onSubmit(static function (Form $form) {
+    print_r($form->entity->get());
+});
\ No newline at end of file
diff --git a/demos/init-app.php b/demos/init-app.php
index 7a27baaa98..e2833ab7a9 100644
--- a/demos/init-app.php
+++ b/demos/init-app.php
@@ -188,6 +188,7 @@ public static function get_class(\Closure $createAnonymousClassFx): string
     $layout->addMenuItem(['Multi Line'], [$path . 'multiline'], $menu);
     $layout->addMenuItem(['Tree Selector'], [$path . 'tree-item-selector'], $menu);
     $layout->addMenuItem(['Scope Builder'], [$path . 'scope-builder'], $menu);
+    $layout->addMenuItem(['Slider'], [$path . 'slider'], $menu);
 
     $path = $demosUrl . 'collection/';
     $menu = $layout->addMenuGroup(['Data Collection', 'icon' => 'table']);
diff --git a/src/Form/Control/Slider.php b/src/Form/Control/Slider.php
index 0681ca5466..5476fbfe43 100644
--- a/src/Form/Control/Slider.php
+++ b/src/Form/Control/Slider.php
@@ -94,7 +94,7 @@ class Slider extends Input
     /** @var string|null Color of the slider. */
     public $color = null;
 
-    /** @var object|View */
+    /** @var View */
     public $slider;
 
     /** @var object */
@@ -110,7 +110,7 @@ class Slider extends Input
     protected function init(): void
     {
         parent::init();
-        //print_r(parent::class());
+        //print_r(get_object_vars(parent::init()));
         $this->owner = $this->getOwner();
 
         $this->slider = View::addTo($this->owner);

From 2c80ee3f29759f7809aae37e1521565c77ca4814 Mon Sep 17 00:00:00 2001
From: Rickard Osser <ricky@osser.se>
Date: Wed, 28 Aug 2024 13:41:09 +0200
Subject: [PATCH 05/30] Code-style fixes.

---
 demos/form-control/slider.php | 13 ++++-------
 src/Form/Control/Slider.php   | 44 +++++++++++++++++------------------
 2 files changed, 26 insertions(+), 31 deletions(-)

diff --git a/demos/form-control/slider.php b/demos/form-control/slider.php
index 678eb66de4..5b8a031d49 100644
--- a/demos/form-control/slider.php
+++ b/demos/form-control/slider.php
@@ -9,9 +9,6 @@
 use Atk4\Ui\Header;
 use Atk4\Ui\Js\JsExpression;
 
-
-
-
 /** @var App $app */
 require_once __DIR__ . '/../init-app.php';
 
@@ -27,7 +24,7 @@
         'max' => 10,
         'step' => 1,
         'start' => 5,
-        'caption' => 'Simple Slider'
+        'caption' => 'Simple Slider',
     ]
 );
 
@@ -41,7 +38,7 @@
         'max' => 10,
         'step' => 1,
         'start' => 5,
-        'caption' => 'Blue ticked and labeled Simple Slider'
+        'caption' => 'Blue ticked and labeled Simple Slider',
     ]
 );
 $slider2->slider->addClass('blue');
@@ -57,7 +54,7 @@
         'step' => 1,
         'start' => 5,
         'smooth' => true,
-        'caption' => 'Smooth Blue ticked and labeled Simple Slider'
+        'caption' => 'Smooth Blue ticked and labeled Simple Slider',
     ]
 );
 
@@ -74,10 +71,10 @@
         'end' => 6,
         'smooth' => true,
         'color' => 'blue',
-        'caption' => 'Smooth Blue ticked and labeled Ranged Slider'
+        'caption' => 'Smooth Blue ticked and labeled Ranged Slider',
     ]
 );
 
 $form->onSubmit(static function (Form $form) {
     print_r($form->entity->get());
-});
\ No newline at end of file
+});
diff --git a/src/Form/Control/Slider.php b/src/Form/Control/Slider.php
index 5476fbfe43..fdce76fa6d 100644
--- a/src/Form/Control/Slider.php
+++ b/src/Form/Control/Slider.php
@@ -4,10 +4,9 @@
 
 namespace Atk4\Ui\Form\Control;
 
-use Atk4\Ui\View;
 use Atk4\Ui\Js\JsExpression;
 use Atk4\Ui\Js\JsFunction;
-use Atk4\Ui\Js\JsReload;
+use Atk4\Ui\View;
 
 class Slider extends Input
 {
@@ -26,19 +25,19 @@ class Slider extends Input
     public float $start = 0;
 
     /** @var float|null The second value to set in case of a range slider. */
-    public $end = null;
+    public $end;
 
     /** @var float|false Makes sure that the two thumbs of a range slider always need to have a difference of the given value. */
     public $minRange = false;
 
-    /**  @var float|false Makes sure that the two thumbs of a range slider don't exceed a difference of the given value. */
+    /** @var float|false Makes sure that the two thumbs of a range slider don't exceed a difference of the given value. */
     public $maxRange = false;
 
     /** @var 'number'|'letter' The type of label to display for a labeled slider. Can be number or letter. */
     public $labelType = 'number';
 
     /** @var array|null An array of label values which restrict the displayed labels to only those which are defined. */
-    public $restrictedLabels = null;
+    public $restrictedLabels;
 
     /** Whether a tooltip should be shown to the thumb(s) on hover. Will contain the current slider value. */
     public bool $showThumbTooltip = false;
@@ -49,7 +48,7 @@ class Slider extends Input
      *
      * @var array|null
      */
-    public $tooltipConfig = null;
+    public $tooltipConfig;
 
     /**
      * Show ticks on a labeled slider.
@@ -92,7 +91,7 @@ class Slider extends Input
     public bool $vertical = false;
 
     /** @var string|null Color of the slider. */
-    public $color = null;
+    public $color;
 
     /** @var View */
     public $slider;
@@ -105,16 +104,16 @@ class Slider extends Input
 
     /** @var object */
     private $secondInput;
-    
+
     #[\Override]
     protected function init(): void
     {
         parent::init();
-        //print_r(get_object_vars(parent::init()));
+
         $this->owner = $this->getOwner();
 
         $this->slider = View::addTo($this->owner);
-        $this->slider->ui ='ui slider';
+        $this->slider->ui = 'ui slider';
 
         if ($this->end) {
             $this->slider->addClass('range');
@@ -139,7 +138,7 @@ protected function init(): void
         if ($this->color) {
             $this->slider->addClass($this->color);
         }
-        
+
         $sliderSettings = [];
         $sliderSettings['min'] = $this->min;
         $sliderSettings['max'] = $this->max;
@@ -176,19 +175,17 @@ protected function init(): void
         $sliderSettings['pageMultiplier'] = $this->pageMultiplier;
         $sliderSettings['decimalPlaces'] = $this->decimalPlaces;
         $sliderSettings['preventCrossover'] = $this->preventCrossover;
-        
+
         if ($this->disabled || $this->readOnly) {
             $this->slider->addClass('disabled');
         }
 
         if (!$this->disabled) {
-            /*
-             * First input value, always present
-             */
+            // First input value, always present
             $this->firstInput = $this->owner->addControl(
                 $this->shortName . '_first',
                 [
-                    Hidden::class
+                    Hidden::class,
                 ]
             )->set($this->start);
 
@@ -201,18 +198,18 @@ protected function init(): void
                                 $this->firstInput->js()->find('input')->jsRender() . '.val($(\'div#\' + [] + \'\').slider(\'get thumbValue\', \'first\'))',
                                 [$this->slider->getHtmlId()]
                             ),
-                        ])
+                        ]
+                    ),
                 ];
             }
             
-            /*
-             * Second input value, optional, depending on $this->end
-             */
+
+            // Second input value, optional, depending on $this->end
             if ($this->end) {
                 $this->secondInput = $this->owner->addControl(
                     $this->shortName . '_second',
                     [
-                        Hidden::class
+                        Hidden::class,
                     ]
                 )->set($this->end);
 
@@ -229,7 +226,8 @@ protected function init(): void
                                     $this->secondInput->js()->find('input')->jsRender() . '.val($(\'div#\' + [] + \'\').slider(\'get thumbValue\', \'second\'))',
                                     [$this->slider->getHtmlId()]
                                 ),
-                            ])
+                            ]
+                        ),
                     ];
                 }
             }
@@ -239,7 +237,7 @@ protected function init(): void
             $this->firstInput->setAttr(['readOnly' => '']);
         }
         if (!empty($onChange)) {
-            $sliderSettings = $sliderSettings + $onChange;
+            $sliderSettings += $onChange;
         }
         $this->slider->js(true)->slider(
             $sliderSettings,

From 9305eedbef81a9b3ad0e0195d79972cf22cb81bb Mon Sep 17 00:00:00 2001
From: Rickard Osser <ricky@osser.se>
Date: Wed, 28 Aug 2024 13:54:20 +0200
Subject: [PATCH 06/30] Code-style fixes.

---
 demos/form-control/input2.php | 10 ++++------
 src/Form/Control/Slider.php   | 19 +------------------
 2 files changed, 5 insertions(+), 24 deletions(-)

diff --git a/demos/form-control/input2.php b/demos/form-control/input2.php
index c6fd4cb0a6..018658129e 100644
--- a/demos/form-control/input2.php
+++ b/demos/form-control/input2.php
@@ -67,7 +67,7 @@
         'step' => 0.1,
         'start' => 0.5,
         'smooth' => true,
-        'caption' => 'Normal Slider'
+        'caption' => 'Normal Slider',
     ]
 );
 
@@ -85,7 +85,7 @@
         'start' => 2,
         'smooth' => true,
         'color' => 'yellow',
-        'caption' => 'Read Only Slider'
+        'caption' => 'Read Only Slider',
     ]
 );
 
@@ -102,12 +102,10 @@
         'step' => 1,
         'start' => 5,
         'smooth' => true,
-        'caption' => 'Disabled Slider'
+        'caption' => 'Disabled Slider',
     ]
 );
-/**
- * We can add classes to a slider by doing:
- */
+// We can add classes to a slider by doing:
 $disabledSlider->slider->addClass('red');
 
 $group = $form->addGroup('File upload');
diff --git a/src/Form/Control/Slider.php b/src/Form/Control/Slider.php
index fdce76fa6d..5599a7d24b 100644
--- a/src/Form/Control/Slider.php
+++ b/src/Form/Control/Slider.php
@@ -41,7 +41,7 @@ class Slider extends Input
 
     /** Whether a tooltip should be shown to the thumb(s) on hover. Will contain the current slider value. */
     public bool $showThumbTooltip = false;
-    
+
     /**
      * Tooltip configuration used when showThumbTooltip is true
      * Refer to Tooltip Variations for possible values.
@@ -202,7 +202,6 @@ protected function init(): void
                     ),
                 ];
             }
-            
 
             // Second input value, optional, depending on $this->end
             if ($this->end) {
@@ -243,20 +242,4 @@ protected function init(): void
             $sliderSettings,
         );
     }
-
-    
-    #[\Override]
-    protected function recursiveRender(): void
-    {
-        /**
-         * Will be removed after testing...
-         */
-
-        parent::recursiveRender();
-
-        //print_r(get_object_vars($this));
-        //print_r(get_class_methods($this));
-        //print $this->parent;
-
-    }
 }

From 73ded47a82d476ba93a102e0eada7c4c4b2b8a65 Mon Sep 17 00:00:00 2001
From: Rickard Osser <ricky@osser.se>
Date: Wed, 28 Aug 2024 14:09:37 +0200
Subject: [PATCH 07/30] Code-style fixes.

---
 demos/form-control/slider.php | 1 -
 1 file changed, 1 deletion(-)

diff --git a/demos/form-control/slider.php b/demos/form-control/slider.php
index 5b8a031d49..4f14f637b8 100644
--- a/demos/form-control/slider.php
+++ b/demos/form-control/slider.php
@@ -7,7 +7,6 @@
 use Atk4\Ui\App;
 use Atk4\Ui\Form;
 use Atk4\Ui\Header;
-use Atk4\Ui\Js\JsExpression;
 
 /** @var App $app */
 require_once __DIR__ . '/../init-app.php';

From a0d5fb0dad090c9e245acd91fb72d9c5feffc478 Mon Sep 17 00:00:00 2001
From: Rickard Osser <ricky@osser.se>
Date: Thu, 29 Aug 2024 01:08:20 +0200
Subject: [PATCH 08/30] Added embryo of behat-tests.

---
 tests-behat/slider.feature | 10 ++++++++++
 1 file changed, 10 insertions(+)
 create mode 100644 tests-behat/slider.feature

diff --git a/tests-behat/slider.feature b/tests-behat/slider.feature
new file mode 100644
index 0000000000..bde5e291c5
--- /dev/null
+++ b/tests-behat/slider.feature
@@ -0,0 +1,10 @@
+Feature: Slider
+
+  Scenario:
+    Given I am on "form-control/slider.php"
+
+    Then I check if input value for "slider_simple2_first" match text "5.0"
+    When I click using selector "//div[@id='atk_layout_maestro_form_form_layout_view']/following::div[contains(@class, 'thumb')]"
+    Then I check if input value for "slider_simple2_first" match text "2"
+
+

From 1ce30925ace2f265db4f3b377b3ca67b76ceac97 Mon Sep 17 00:00:00 2001
From: Rickard Osser <ricky@osser.se>
Date: Thu, 29 Aug 2024 01:34:47 +0200
Subject: [PATCH 09/30] Fixed embryo of behat-tests.

---
 tests-behat/slider.feature | 6 ++----
 1 file changed, 2 insertions(+), 4 deletions(-)

diff --git a/tests-behat/slider.feature b/tests-behat/slider.feature
index bde5e291c5..4534a2fc42 100644
--- a/tests-behat/slider.feature
+++ b/tests-behat/slider.feature
@@ -3,8 +3,6 @@ Feature: Slider
   Scenario:
     Given I am on "form-control/slider.php"
 
-    Then I check if input value for "slider_simple2_first" match text "5.0"
+    Then I check if input value for "//input[@name='slider_simple2_first']" match text "5.0"
     When I click using selector "//div[@id='atk_layout_maestro_form_form_layout_view']/following::div[contains(@class, 'thumb')]"
-    Then I check if input value for "slider_simple2_first" match text "2"
-
-
+    Then I check if input value for "//input[@name='slider_simple2_first']" match text "2"

From 02d3e001d2a63f0679a894e17978ac10b2ff6e9c Mon Sep 17 00:00:00 2001
From: Rickard Osser <ricky@osser.se>
Date: Sun, 1 Sep 2024 21:30:36 +0200
Subject: [PATCH 10/30] Added custom label function. It's not finished.

---
 demos/form-control/slider.php | 30 +++++++++++++++++++++++++---
 src/Form/Control/Slider.php   | 37 +++++++++++++++++++++++++++++++----
 2 files changed, 60 insertions(+), 7 deletions(-)

diff --git a/demos/form-control/slider.php b/demos/form-control/slider.php
index 4f14f637b8..1d02617b2e 100644
--- a/demos/form-control/slider.php
+++ b/demos/form-control/slider.php
@@ -37,7 +37,7 @@
         'max' => 10,
         'step' => 1,
         'start' => 5,
-        'caption' => 'Blue ticked and labeled Simple Slider',
+        'caption' => 'Blue ticked and labeled simple slider',
     ]
 );
 $slider2->slider->addClass('blue');
@@ -53,7 +53,7 @@
         'step' => 1,
         'start' => 5,
         'smooth' => true,
-        'caption' => 'Smooth Blue ticked and labeled Simple Slider',
+        'caption' => 'Smooth Blue ticked and labeled simple slider',
     ]
 );
 
@@ -70,7 +70,31 @@
         'end' => 6,
         'smooth' => true,
         'color' => 'blue',
-        'caption' => 'Smooth Blue ticked and labeled Ranged Slider',
+        'caption' => 'Smooth Blue ticked and labeled Ranged slider',
+    ]
+);
+
+$form->onSubmit(static function (Form $form) {
+    print_r($form->entity->get());
+});
+
+$form->addControl(
+    'slider_custom1',
+    [
+        Form\Control\Slider::class,
+        'labeled' => true,
+        'ticked' => true,
+        'min' => 1,
+        'max' => 7,
+        'step' => 1,
+        'start' => 1,
+        'smooth' => true,
+        'color' => 'red',
+        'labelType' => 'letter',
+        'customLabels' => [
+            'XS', 'S', 'M', 'L', 'XL', '2XL', '3XL'
+        ],
+        'caption' => 'Smooth Red ticked and custom labeled slider',
     ]
 );
 
diff --git a/src/Form/Control/Slider.php b/src/Form/Control/Slider.php
index 5599a7d24b..5b81887b9e 100644
--- a/src/Form/Control/Slider.php
+++ b/src/Form/Control/Slider.php
@@ -12,11 +12,11 @@ class Slider extends Input
 {
     public string $inputType = 'hidden';
 
-    /** The lowest value the slider can be. */
-    public float $min = 0;
+    /** @var float|string The lowest value the slider can be. */
+    public $min = 0;
 
-    /** The max value the slider can be. */
-    public float $max = 10;
+    /** @var float|string The max value the slider can be. */
+    public $max = 10;
 
     /** @var float|null The slider step. Set to 0 to disable step. */
     public $step = 0;
@@ -90,6 +90,14 @@ class Slider extends Input
     /** Whether the ticks and labels should be at the bottom. */
     public bool $vertical = false;
 
+    /**
+     * Custom interpreted labels.
+     * Provide an array which will be used for populating the labels.
+     *
+     * @var array|null
+     */
+    public $customLabels;
+
     /** @var string|null Color of the slider. */
     public $color;
 
@@ -189,6 +197,27 @@ protected function init(): void
                 ]
             )->set($this->start);
 
+            if ($this->customLabels) {
+                $app = $this->getApp();
+                
+                $app->html->template->dangerouslyAppendHtml(
+                    'Head',
+                    $app->getTag(
+                        'script',
+                        [],
+                        "
+                var labels = ['" . implode("', '", $this->customLabels) ."'];\n
+                $('#" . $this->slider->name . "')
+                    .slider({
+                        interpretLabel: function(value) {
+                           return labels[value];
+                        }
+                    })
+                ;   
+                        ",
+                        [$this->customLabels, $this->slider->name]));
+            }
+            
             if (!$this->readOnly) {
                 $onChange = [
                     'onChange' => new JsFunction(

From 9c54381d4d308f1d7e12ab52cf8a575dae2001fd Mon Sep 17 00:00:00 2001
From: Rickard Osser <ricky@osser.se>
Date: Sun, 1 Sep 2024 22:59:19 +0200
Subject: [PATCH 11/30] Behat changes.

---
 tests-behat/slider.feature | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/tests-behat/slider.feature b/tests-behat/slider.feature
index 4534a2fc42..2374e577ea 100644
--- a/tests-behat/slider.feature
+++ b/tests-behat/slider.feature
@@ -5,4 +5,6 @@ Feature: Slider
 
     Then I check if input value for "//input[@name='slider_simple2_first']" match text "5.0"
     When I click using selector "//div[@id='atk_layout_maestro_form_form_layout_view']/following::div[contains(@class, 'thumb')]"
-    Then I check if input value for "//input[@name='slider_simple2_first']" match text "2"
+    //    When I fill in attribute "style" with "left: calc(20% - 10.5px); right: auto;" using selector "//div[@id='atk_layout_maestro_form_form_layout_view']/following::div[contains(@class, 'thumb')]"
+    Then I check if input value for "//input[@name='slider_simple2_first']" match text "5.0"
+

From 2546f879212b75b8851bd74c27bcd9141b72fc69 Mon Sep 17 00:00:00 2001
From: Rickard Osser <ricky@osser.se>
Date: Mon, 2 Sep 2024 09:15:50 +0200
Subject: [PATCH 12/30] Trying to get custom labels to work.

---
 demos/form-control/slider.php | 10 ++++----
 src/Form/Control/Slider.php   | 46 +++++++++++++++++++----------------
 2 files changed, 30 insertions(+), 26 deletions(-)

diff --git a/demos/form-control/slider.php b/demos/form-control/slider.php
index 1d02617b2e..f311947ae0 100644
--- a/demos/form-control/slider.php
+++ b/demos/form-control/slider.php
@@ -84,13 +84,13 @@
         Form\Control\Slider::class,
         'labeled' => true,
         'ticked' => true,
-        'min' => 1,
-        'max' => 7,
+        'min' => 0,
+        'max' => 6,
         'step' => 1,
         'start' => 1,
-        'smooth' => true,
-        'color' => 'red',
-        'labelType' => 'letter',
+        //'smooth' => true,
+        //'color' => 'red',
+        //'labelType' => 'letter',
         'customLabels' => [
             'XS', 'S', 'M', 'L', 'XL', '2XL', '3XL'
         ],
diff --git a/src/Form/Control/Slider.php b/src/Form/Control/Slider.php
index 5b81887b9e..2eab0d31a7 100644
--- a/src/Form/Control/Slider.php
+++ b/src/Form/Control/Slider.php
@@ -6,7 +6,9 @@
 
 use Atk4\Ui\Js\JsExpression;
 use Atk4\Ui\Js\JsFunction;
+use Atk4\Ui\Js\JsBlock;
 use Atk4\Ui\View;
+use Atk4\Ui\HtmlTemplate;
 
 class Slider extends Input
 {
@@ -184,6 +186,29 @@ protected function init(): void
         $sliderSettings['decimalPlaces'] = $this->decimalPlaces;
         $sliderSettings['preventCrossover'] = $this->preventCrossover;
 
+        if ($this->customLabels) {
+            $customLabelTemplate = new HtmlTemplate(<<<'EOF'
+    {$script}
+EOF);
+            $app = $this->getApp();
+            $customLabelView = View::addTo($app, ['template' => $customLabelTemplate]);
+
+            $customLabelArray = '\'' . implode('\', \'', $this->customLabels) . '\'';
+            $customLabelJS = "var labels = [$customLabelArray];";
+            
+            $sliderSettings['interpretLabel'] = 'function interpretLabel(value) { return labels[value];}';
+
+            $customLabelScript = $app->getTag('script', [], $customLabelJS . 'function interpretLabel(value) { return labels[value];}'); 
+            $customLabelView->template->dangerouslySetHtml('script', $customLabelScript);
+            
+            
+            //$test_tag = $app->getTag('div', ['class' => 'evaluated code', 'data-type' => 'javascript'], $customLabelJS);
+            //print $test_tag;
+            //$this->template->dangerouslyAppendHtml('BeforeInput', $test_tag);
+            
+        }
+        
+        
         if ($this->disabled || $this->readOnly) {
             $this->slider->addClass('disabled');
         }
@@ -197,27 +222,6 @@ protected function init(): void
                 ]
             )->set($this->start);
 
-            if ($this->customLabels) {
-                $app = $this->getApp();
-                
-                $app->html->template->dangerouslyAppendHtml(
-                    'Head',
-                    $app->getTag(
-                        'script',
-                        [],
-                        "
-                var labels = ['" . implode("', '", $this->customLabels) ."'];\n
-                $('#" . $this->slider->name . "')
-                    .slider({
-                        interpretLabel: function(value) {
-                           return labels[value];
-                        }
-                    })
-                ;   
-                        ",
-                        [$this->customLabels, $this->slider->name]));
-            }
-            
             if (!$this->readOnly) {
                 $onChange = [
                     'onChange' => new JsFunction(

From 641c54be014b2a4e9272b3d8512fbf535171fdce Mon Sep 17 00:00:00 2001
From: Rickard Osser <ricky@osser.se>
Date: Wed, 4 Sep 2024 10:47:36 +0200
Subject: [PATCH 13/30] Fixed customLabels for slider.

---
 demos/form-control/slider.php | 17 +++++++----------
 src/Form/Control/Slider.php   | 20 ++------------------
 2 files changed, 9 insertions(+), 28 deletions(-)

diff --git a/demos/form-control/slider.php b/demos/form-control/slider.php
index f311947ae0..50f758106e 100644
--- a/demos/form-control/slider.php
+++ b/demos/form-control/slider.php
@@ -69,15 +69,13 @@
         'start' => 3,
         'end' => 6,
         'smooth' => true,
+        'showThumbTooltip' => true,
+        'tooltipConfig' =>  ['position' => 'top center', 'variation' => 'big blue'],
         'color' => 'blue',
-        'caption' => 'Smooth Blue ticked and labeled Ranged slider',
+        'caption' => 'Smooth Blue, ticked and labeled with tool-tips Ranged slider',
     ]
 );
 
-$form->onSubmit(static function (Form $form) {
-    print_r($form->entity->get());
-});
-
 $form->addControl(
     'slider_custom1',
     [
@@ -87,14 +85,13 @@
         'min' => 0,
         'max' => 6,
         'step' => 1,
-        'start' => 1,
-        //'smooth' => true,
-        //'color' => 'red',
-        //'labelType' => 'letter',
+        'start' => 2,
+        'smooth' => true,
+        'color' => 'green',
         'customLabels' => [
             'XS', 'S', 'M', 'L', 'XL', '2XL', '3XL'
         ],
-        'caption' => 'Smooth Red ticked and custom labeled slider',
+        'caption' => 'Smooth Green, ticked and custom labeled slider',
     ]
 );
 
diff --git a/src/Form/Control/Slider.php b/src/Form/Control/Slider.php
index 2eab0d31a7..ccba0b586d 100644
--- a/src/Form/Control/Slider.php
+++ b/src/Form/Control/Slider.php
@@ -187,25 +187,9 @@ protected function init(): void
         $sliderSettings['preventCrossover'] = $this->preventCrossover;
 
         if ($this->customLabels) {
-            $customLabelTemplate = new HtmlTemplate(<<<'EOF'
-    {$script}
-EOF);
-            $app = $this->getApp();
-            $customLabelView = View::addTo($app, ['template' => $customLabelTemplate]);
-
-            $customLabelArray = '\'' . implode('\', \'', $this->customLabels) . '\'';
+            $customLabelArray = "'" . implode("', '", $this->customLabels) . "'";
             $customLabelJS = "var labels = [$customLabelArray];";
-            
-            $sliderSettings['interpretLabel'] = 'function interpretLabel(value) { return labels[value];}';
-
-            $customLabelScript = $app->getTag('script', [], $customLabelJS . 'function interpretLabel(value) { return labels[value];}'); 
-            $customLabelView->template->dangerouslySetHtml('script', $customLabelScript);
-            
-            
-            //$test_tag = $app->getTag('div', ['class' => 'evaluated code', 'data-type' => 'javascript'], $customLabelJS);
-            //print $test_tag;
-            //$this->template->dangerouslyAppendHtml('BeforeInput', $test_tag);
-            
+            $sliderSettings['interpretLabel'] = new JsFunction(['value'], [new JsExpression($customLabelJS . 'return labels.slice(value, value + 1)')]);
         }
         
         

From 62a001b8d391c3bd31476580fcb6b09c95a9feaa Mon Sep 17 00:00:00 2001
From: Rickard Osser <ricky@osser.se>
Date: Wed, 4 Sep 2024 12:30:18 +0200
Subject: [PATCH 14/30] Simplification of the code.

---
 src/Form/Control/Slider.php | 18 +++++++++++++++---
 1 file changed, 15 insertions(+), 3 deletions(-)

diff --git a/src/Form/Control/Slider.php b/src/Form/Control/Slider.php
index ccba0b586d..0b6bdf21ba 100644
--- a/src/Form/Control/Slider.php
+++ b/src/Form/Control/Slider.php
@@ -187,9 +187,21 @@ protected function init(): void
         $sliderSettings['preventCrossover'] = $this->preventCrossover;
 
         if ($this->customLabels) {
-            $customLabelArray = "'" . implode("', '", $this->customLabels) . "'";
-            $customLabelJS = "var labels = [$customLabelArray];";
-            $sliderSettings['interpretLabel'] = new JsFunction(['value'], [new JsExpression($customLabelJS . 'return labels.slice(value, value + 1)')]);
+            $sliderSettings['interpretLabel'] = new JsFunction(
+                [
+                    'value',
+                ],
+                [
+                    new JsExpression(<<<EOF
+                                        var labels = [];
+                                        return labels.slice(value, value + 1);
+                    EOF,
+                    [
+                        $this->customLabels,
+                    ],
+                    )
+                ],
+            );
         }
         
         

From 91eed9ead0f23088cac79872b93f17ae48d35264 Mon Sep 17 00:00:00 2001
From: Rickard Osser <ricky@osser.se>
Date: Wed, 4 Sep 2024 12:31:31 +0200
Subject: [PATCH 15/30] Coding style fixes in demo.

---
 demos/form-control/slider.php | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/demos/form-control/slider.php b/demos/form-control/slider.php
index 50f758106e..e3a3dd44e5 100644
--- a/demos/form-control/slider.php
+++ b/demos/form-control/slider.php
@@ -70,7 +70,7 @@
         'end' => 6,
         'smooth' => true,
         'showThumbTooltip' => true,
-        'tooltipConfig' =>  ['position' => 'top center', 'variation' => 'big blue'],
+        'tooltipConfig' => ['position' => 'top center', 'variation' => 'big blue'],
         'color' => 'blue',
         'caption' => 'Smooth Blue, ticked and labeled with tool-tips Ranged slider',
     ]
@@ -89,7 +89,7 @@
         'smooth' => true,
         'color' => 'green',
         'customLabels' => [
-            'XS', 'S', 'M', 'L', 'XL', '2XL', '3XL'
+            'XS', 'S', 'M', 'L', 'XL', '2XL', '3XL',
         ],
         'caption' => 'Smooth Green, ticked and custom labeled slider',
     ]

From 27c5895a7429051c01e6f6bc142ea24d02983fb7 Mon Sep 17 00:00:00 2001
From: Rickard Osser <ricky@osser.se>
Date: Wed, 4 Sep 2024 12:35:30 +0200
Subject: [PATCH 16/30] Coding style fixes in demo.

---
 src/Form/Control/Slider.php | 20 ++++++++++----------
 1 file changed, 10 insertions(+), 10 deletions(-)

diff --git a/src/Form/Control/Slider.php b/src/Form/Control/Slider.php
index 0b6bdf21ba..2efd728b52 100644
--- a/src/Form/Control/Slider.php
+++ b/src/Form/Control/Slider.php
@@ -192,19 +192,19 @@ protected function init(): void
                     'value',
                 ],
                 [
-                    new JsExpression(<<<EOF
-                                        var labels = [];
-                                        return labels.slice(value, value + 1);
-                    EOF,
-                    [
-                        $this->customLabels,
-                    ],
-                    )
+                    new JsExpression(
+                        <<<'EOF'
+                            var labels = [];
+                            return labels.slice(value, value + 1);
+                        EOF,
+                        [
+                            $this->customLabels,
+                        ],
+                    ),
                 ],
             );
         }
-        
-        
+
         if ($this->disabled || $this->readOnly) {
             $this->slider->addClass('disabled');
         }

From 07790e83fadcc42989d42a4be3946684f7174d44 Mon Sep 17 00:00:00 2001
From: Rickard Osser <ricky@osser.se>
Date: Wed, 4 Sep 2024 12:37:11 +0200
Subject: [PATCH 17/30] Coding style fixes in demo.

---
 src/Form/Control/Slider.php | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/Form/Control/Slider.php b/src/Form/Control/Slider.php
index 2efd728b52..54f30e8f04 100644
--- a/src/Form/Control/Slider.php
+++ b/src/Form/Control/Slider.php
@@ -194,9 +194,9 @@ protected function init(): void
                 [
                     new JsExpression(
                         <<<'EOF'
-                            var labels = [];
-                            return labels.slice(value, value + 1);
-                        EOF,
+                                var labels = [];
+                                return labels.slice(value, value + 1);
+                            EOF,
                         [
                             $this->customLabels,
                         ],

From 313f11898d8f0bb17d7dfd19363b0b6086938f3c Mon Sep 17 00:00:00 2001
From: Rickard Osser <ricky@osser.se>
Date: Wed, 4 Sep 2024 12:38:35 +0200
Subject: [PATCH 18/30] Coding style fixes in demo.

---
 src/Form/Control/Slider.php | 2 --
 1 file changed, 2 deletions(-)

diff --git a/src/Form/Control/Slider.php b/src/Form/Control/Slider.php
index 54f30e8f04..a082c2474e 100644
--- a/src/Form/Control/Slider.php
+++ b/src/Form/Control/Slider.php
@@ -6,9 +6,7 @@
 
 use Atk4\Ui\Js\JsExpression;
 use Atk4\Ui\Js\JsFunction;
-use Atk4\Ui\Js\JsBlock;
 use Atk4\Ui\View;
-use Atk4\Ui\HtmlTemplate;
 
 class Slider extends Input
 {

From 3718627d26f746ffae8c750ba993e64d9493e4dc Mon Sep 17 00:00:00 2001
From: Rickard Osser <ricky@osser.se>
Date: Fri, 6 Sep 2024 11:22:28 +0200
Subject: [PATCH 19/30] Returned to using the array directly with spaces
 between brackets.

---
 src/Form/Control/Slider.php | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/Form/Control/Slider.php b/src/Form/Control/Slider.php
index a082c2474e..a92e808f9a 100644
--- a/src/Form/Control/Slider.php
+++ b/src/Form/Control/Slider.php
@@ -193,7 +193,7 @@ protected function init(): void
                     new JsExpression(
                         <<<'EOF'
                                 var labels = [];
-                                return labels.slice(value, value + 1);
+                                return labels[ value ];
                             EOF,
                         [
                             $this->customLabels,

From c51fe87c583e27af0b97f714792a40fb135830c9 Mon Sep 17 00:00:00 2001
From: Rickard Osser <ricky@osser.se>
Date: Sun, 20 Apr 2025 17:56:23 +0200
Subject: [PATCH 20/30] Fixed vertical slider for complex version.

---
 demos/form-control/slider.php | 80 ++++++++++++++++++++++++++++++++-
 src/Form/Control/Slider.php   | 84 ++++++++++++++++++++++-------------
 tests-behat/slider.feature    |  3 +-
 3 files changed, 131 insertions(+), 36 deletions(-)
 mode change 100644 => 100755 src/Form/Control/Slider.php

diff --git a/demos/form-control/slider.php b/demos/form-control/slider.php
index e3a3dd44e5..624da6da61 100644
--- a/demos/form-control/slider.php
+++ b/demos/form-control/slider.php
@@ -7,6 +7,9 @@
 use Atk4\Ui\App;
 use Atk4\Ui\Form;
 use Atk4\Ui\Header;
+use Atk4\Ui\Label;
+use Atk4\Ui\Coluns;
+
 
 /** @var App $app */
 require_once __DIR__ . '/../init-app.php';
@@ -58,7 +61,7 @@
 );
 
 $form->addControl(
-    'slider_ranged1',
+    'slider_ranged',
     [
         Form\Control\Slider::class,
         'labeled' => true,
@@ -77,7 +80,7 @@
 );
 
 $form->addControl(
-    'slider_custom1',
+    'slider_custom',
     [
         Form\Control\Slider::class,
         'labeled' => true,
@@ -95,6 +98,79 @@
     ]
 );
 
+$group = $form->addGroup(
+    [
+        'Vertical sliders',
+        'inline' => true,
+        'width' => 'six',
+    ],
+);
+
+$g1 = $group->addControl(
+    'slider_vertical',
+    [
+        Form\Control\Slider::class,
+        'labeled' => true,
+        'ticked' => true,
+        'min' => 0,
+        'max' => 6,
+        'step' => 1,
+        'start' => 2,
+        'smooth' => true,
+        'color' => 'red',
+        'vertical' => true,
+        'reversed' => true,
+        'size' => 'small',
+        'caption' => 'Smooth Red, ticked and vertical slider',
+        'width' => 'one',
+    ]
+);
+
+Label::addTo($g1, ['Smooth Red, ticked and vertical slider', 'class.right pointing basic label' => true], ['BeforeInput']);
+
+$group->addControl(
+    'slider_vertical_right',
+    [
+        Form\Control\Slider::class,
+        'labeled' => true,
+        'ticked' => true,
+        'min' => 0,
+        'max' => 6,
+        'step' => 1,
+        'start' => 2,
+        'smooth' => true,
+        'color' => 'yellow',
+        'vertical' => true,
+        'reversed' => true,
+        'verticalHeight' => 300,
+        'caption' => 'Smooth yellow, ticked, sized, custom height, vertical slider',
+        'width' => 'two',
+    ]
+);
+
+$group->addControl(
+    'slider_vertical_right_ranged',
+    [
+        Form\Control\Slider::class,
+        'labeled' => true,
+        'ticked' => true,
+        'min' => 0,
+        'max' => 6,
+        'step' => 1,
+        'start' => 2,
+        'end' => 6,
+        'smooth' => true,
+        'color' => 'green',
+        'vertical' => true,
+        'reversed' => true,
+        'verticalHeight' => 400,
+        'verticalRightAligned' => false,
+        'size' => 'large',
+        'caption' => 'Large',
+        'width' => 'one',
+    ]
+);
+
 $form->onSubmit(static function (Form $form) {
     print_r($form->entity->get());
 });
diff --git a/src/Form/Control/Slider.php b/src/Form/Control/Slider.php
old mode 100644
new mode 100755
index a92e808f9a..936a741386
--- a/src/Form/Control/Slider.php
+++ b/src/Form/Control/Slider.php
@@ -21,11 +21,11 @@ class Slider extends Input
     /** @var float|null The slider step. Set to 0 to disable step. */
     public $step = 0;
 
-    /** The value the slider will start at. */
+    /** @var float The value the slider will start with. */
     public float $start = 0;
 
-    /** @var float|null The second value to set in case of a range slider. */
-    public $end;
+    /** @var float|null The end value to set in case of a range slider. */
+    public ?float $end = null;
 
     /** @var float|false Makes sure that the two thumbs of a range slider always need to have a difference of the given value. */
     public $minRange = false;
@@ -39,7 +39,7 @@ class Slider extends Input
     /** @var array|null An array of label values which restrict the displayed labels to only those which are defined. */
     public $restrictedLabels;
 
-    /** Whether a tooltip should be shown to the thumb(s) on hover. Will contain the current slider value. */
+    /** @vat bool Whether a tooltip should be shown to the thumb(s) on hover. Will contain the current slider value. */
     public bool $showThumbTooltip = false;
 
     /**
@@ -87,20 +87,36 @@ class Slider extends Input
     /** Whether the ticks and labels should be at the bottom. */
     public bool $bottom = false;
 
-    /** Whether the ticks and labels should be at the bottom. */
+    /** Whether the slider should be vertical. */
     public bool $vertical = false;
 
+    /** @var string Default height for vertical slider. */
+    public $verticalHeight = 200;
+
+    /** @var bool Right aligned vertical slider. Default true. */
+    public bool $verticalRightAligned = true;
+
+    /** @var bool Default reversed slider. */
+    public bool $reversed = false;
+
     /**
      * Custom interpreted labels.
      * Provide an array which will be used for populating the labels.
      *
      * @var array|null
      */
-    public $customLabels;
+    public $customLabels = null;
 
     /** @var string|null Color of the slider. */
     public $color;
 
+    /**
+     * Size of the slider.
+     * Can be: small, large, big, null is normal size.
+     * @var string|null 
+     */
+    public $size = null;
+
     /** @var View */
     public $slider;
 
@@ -108,10 +124,7 @@ class Slider extends Input
     private $owner;
 
     /** @var object */
-    private $firstInput;
-
-    /** @var object */
-    private $secondInput;
+    private $endInput;
 
     #[\Override]
     protected function init(): void
@@ -121,7 +134,19 @@ protected function init(): void
         $this->owner = $this->getOwner();
 
         $this->slider = View::addTo($this->owner);
-        $this->slider->ui = 'ui slider';
+        if($this->reversed) {
+            $this->slider->ui = 'reversed';
+        }
+        
+        if (!$this->vertical) {
+            $this->slider->ui .= ' slider';
+        } else {
+            $this->slider->ui .= ' vertical slider';
+            $this->slider->setAttr(['style' => 'height: ' . $this->verticalHeight . 'px']);
+            if($this->verticalRightAligned) {
+                $this->slider->addClass('right aligned');
+            }
+        }
 
         if ($this->end) {
             $this->slider->addClass('range');
@@ -139,14 +164,14 @@ protected function init(): void
             $this->slider->addClass('bottom aligned');
         }
 
-        if ($this->vertical) {
-            $this->slider->addClass('vertical');
-        }
-
         if ($this->color) {
             $this->slider->addClass($this->color);
         }
 
+        if ($this->size) {
+            $this->slider->addClass($this->size);
+        }
+
         $sliderSettings = [];
         $sliderSettings['min'] = $this->min;
         $sliderSettings['max'] = $this->max;
@@ -193,7 +218,7 @@ protected function init(): void
                     new JsExpression(
                         <<<'EOF'
                                 var labels = [];
-                                return labels[ value ];
+                                return labels.slice(value, value + 1);
                             EOF,
                         [
                             $this->customLabels,
@@ -208,21 +233,16 @@ protected function init(): void
         }
 
         if (!$this->disabled) {
-            // First input value, always present
-            $this->firstInput = $this->owner->addControl(
-                $this->shortName . '_first',
-                [
-                    Hidden::class,
-                ]
-            )->set($this->start);
-
+            // Set first input value, always present
+            $this->set($this->start);
+            
             if (!$this->readOnly) {
                 $onChange = [
                     'onChange' => new JsFunction(
                         ['v'],
                         [
                             new JsExpression(
-                                $this->firstInput->js()->find('input')->jsRender() . '.val($(\'div#\' + [] + \'\').slider(\'get thumbValue\', \'first\'))',
+                                $this->js()->find('input')->jsRender() . '.val($(\'div#\' + [] + \'\').slider(\'get thumbValue\', \'first\'))',
                                 [$this->slider->getHtmlId()]
                             ),
                         ]
@@ -230,10 +250,10 @@ protected function init(): void
                 ];
             }
 
-            // Second input value, optional, depending on $this->end
+            // End input value, optional, depending on $this->end
             if ($this->end) {
-                $this->secondInput = $this->owner->addControl(
-                    $this->shortName . '_second',
+                $this->endInput = $this->owner->addControl(
+                    $this->shortName . '_end',
                     [
                         Hidden::class,
                     ]
@@ -245,11 +265,11 @@ protected function init(): void
                             ['v'],
                             [
                                 new JsExpression(
-                                    $this->firstInput->js()->find('input')->jsRender() . '.val($(\'div#\' + [] + \'\').slider(\'get thumbValue\', \'first\'))',
+                                    $this->js()->find('input')->jsRender() . '.val($(\'div#\' + [] + \'\').slider(\'get thumbValue\', \'first\'))',
                                     [$this->slider->getHtmlId()]
                                 ),
                                 new JsExpression(
-                                    $this->secondInput->js()->find('input')->jsRender() . '.val($(\'div#\' + [] + \'\').slider(\'get thumbValue\', \'second\'))',
+                                    $this->endInput->js()->find('input')->jsRender() . '.val($(\'div#\' + [] + \'\').slider(\'get thumbValue\', \'second\'))',
                                     [$this->slider->getHtmlId()]
                                 ),
                             ]
@@ -259,8 +279,8 @@ protected function init(): void
             }
         }
         if ($this->readOnly) {
-            $this->firstInput->addClass('readOnly');
-            $this->firstInput->setAttr(['readOnly' => '']);
+            $this->addClass('readOnly');
+            $this->setAttr(['readOnly' => '']);
         }
         if (!empty($onChange)) {
             $sliderSettings += $onChange;
diff --git a/tests-behat/slider.feature b/tests-behat/slider.feature
index 2374e577ea..4aeaf7d07c 100644
--- a/tests-behat/slider.feature
+++ b/tests-behat/slider.feature
@@ -3,8 +3,7 @@ Feature: Slider
   Scenario:
     Given I am on "form-control/slider.php"
 
-    Then I check if input value for "//input[@name='slider_simple2_first']" match text "5.0"
+    Then I check if input value for //div[@id='atk_layout_maestro_form_form_layout_view']/following::div[contains(@class, 'thumb')]", document.body, null, XPathResult.FIRST_ORDERED_NODE_TYPE).singleNodeValue.style.left']" match text "5.0"
     When I click using selector "//div[@id='atk_layout_maestro_form_form_layout_view']/following::div[contains(@class, 'thumb')]"
-    //    When I fill in attribute "style" with "left: calc(20% - 10.5px); right: auto;" using selector "//div[@id='atk_layout_maestro_form_form_layout_view']/following::div[contains(@class, 'thumb')]"
     Then I check if input value for "//input[@name='slider_simple2_first']" match text "5.0"
 

From 03dfb2a274bf98755ba5026ee894d7e79ec85d2b Mon Sep 17 00:00:00 2001
From: Rickard Osser <ricky@osser.se>
Date: Tue, 22 Apr 2025 01:54:20 +0200
Subject: [PATCH 21/30] Added new layout for Vertical sliders. Fixed demo.
 Behat still needed to fix.

---
 demos/form-control/slider.php             | 24 ++++++++++-----------
 src/Form/Control/Slider.php               |  9 +++++++-
 template/form/layout/slider-vertical.html | 16 ++++++++++++++
 template/form/layout/slider-vertical.pug  | 26 +++++++++++++++++++++++
 4 files changed, 61 insertions(+), 14 deletions(-)
 create mode 100644 template/form/layout/slider-vertical.html
 create mode 100644 template/form/layout/slider-vertical.pug

diff --git a/demos/form-control/slider.php b/demos/form-control/slider.php
index 624da6da61..2a0ed4a38f 100644
--- a/demos/form-control/slider.php
+++ b/demos/form-control/slider.php
@@ -7,9 +7,6 @@
 use Atk4\Ui\App;
 use Atk4\Ui\Form;
 use Atk4\Ui\Header;
-use Atk4\Ui\Label;
-use Atk4\Ui\Coluns;
-
 
 /** @var App $app */
 require_once __DIR__ . '/../init-app.php';
@@ -79,6 +76,8 @@
     ]
 );
 
+
+
 $form->addControl(
     'slider_custom',
     [
@@ -100,13 +99,14 @@
 
 $group = $form->addGroup(
     [
-        'Vertical sliders',
-        'inline' => true,
-        'width' => 'six',
+        'inline' => false,
+        //        'width' => 'six',
     ],
 );
 
-$g1 = $group->addControl(
+$h1 = Header::addTo($group, ['Vertical Sliders', 'size' => 3]);
+
+$group->addControl(
     'slider_vertical',
     [
         Form\Control\Slider::class,
@@ -122,12 +122,10 @@
         'reversed' => true,
         'size' => 'small',
         'caption' => 'Smooth Red, ticked and vertical slider',
-        'width' => 'one',
+        'width' => 'two',
     ]
 );
 
-Label::addTo($g1, ['Smooth Red, ticked and vertical slider', 'class.right pointing basic label' => true], ['BeforeInput']);
-
 $group->addControl(
     'slider_vertical_right',
     [
@@ -137,7 +135,7 @@
         'min' => 0,
         'max' => 6,
         'step' => 1,
-        'start' => 2,
+        'start' => 3,
         'smooth' => true,
         'color' => 'yellow',
         'vertical' => true,
@@ -166,8 +164,8 @@
         'verticalHeight' => 400,
         'verticalRightAligned' => false,
         'size' => 'large',
-        'caption' => 'Large',
-        'width' => 'one',
+        'caption' => 'Smooth green, ticked, large, custom heigth, vertical not right aligned slider',
+        'width' => 'two',
     ]
 );
 
diff --git a/src/Form/Control/Slider.php b/src/Form/Control/Slider.php
index 936a741386..3882478512 100755
--- a/src/Form/Control/Slider.php
+++ b/src/Form/Control/Slider.php
@@ -10,6 +10,9 @@
 
 class Slider extends Input
 {
+
+    public string $defaultInputTemplateVertical = 'form/layout/slider-vertical.html';
+
     public string $inputType = 'hidden';
 
     /** @var float|string The lowest value the slider can be. */
@@ -118,6 +121,7 @@ class Slider extends Input
     public $size = null;
 
     /** @var View */
+
     public $slider;
 
     /** @var object */
@@ -132,7 +136,7 @@ protected function init(): void
         parent::init();
 
         $this->owner = $this->getOwner();
-
+        
         $this->slider = View::addTo($this->owner);
         if($this->reversed) {
             $this->slider->ui = 'reversed';
@@ -141,6 +145,9 @@ protected function init(): void
         if (!$this->vertical) {
             $this->slider->ui .= ' slider';
         } else {
+            $this->owner->defaultInputTemplate = $this->defaultInputTemplateVertical;
+            $this->owner->inputTemplate = $this->getApp()->loadTemplate($this->defaultInputTemplateVertical);
+            
             $this->slider->ui .= ' vertical slider';
             $this->slider->setAttr(['style' => 'height: ' . $this->verticalHeight . 'px']);
             if($this->verticalRightAligned) {
diff --git a/template/form/layout/slider-vertical.html b/template/form/layout/slider-vertical.html
new file mode 100644
index 0000000000..8018911df8
--- /dev/null
+++ b/template/form/layout/slider-vertical.html
@@ -0,0 +1,16 @@
+{LabeledGroup}
+<div class="{$controlClass} field atk-form-group">
+  <label>{$label}</label>
+  <div class="{$width} {$class} fields">{$Content}</div>{$Hint}
+</div>{/}
+{NoLabelGroup}
+<div class="{$controlClass} field atk-form-group">
+  <div class="{$width} {$class} fields">{$Content}</div>
+</div>{/}
+{LabeledControl}
+<div class="{$controlClass} field" style="padding-left: 60px">
+  <label for="{$labelFor}">{$label}</label>{$Input}
+  {$Hint}
+</div>{/}
+{NoLabelControl}
+<div class="{$controlClass} field no-label" style="padding-left: 60px">{$Input}{$Hint}</div>{/}
diff --git a/template/form/layout/slider-vertical.pug b/template/form/layout/slider-vertical.pug
new file mode 100644
index 0000000000..44486994c2
--- /dev/null
+++ b/template/form/layout/slider-vertical.pug
@@ -0,0 +1,26 @@
+| {LabeledGroup}
+div(class="{$controlClass} field atk-form-group")
+    label {$label}
+    div(class="{$width} {$class} fields")
+        | {$Content}
+    | {$Hint}
+| {/}
+
+| {NoLabelGroup}
+div(class="{$controlClass} field atk-form-group")
+    div(class="{$width} {$class} fields")
+        | {$Content}
+| {/}
+
+| {LabeledControl}
+div(class="{$controlClass} field" style="padding-left: 60px")
+    label(for="{$labelFor}") {$label}
+    | {$Input}
+    | {$Hint}
+| {/}
+
+| {NoLabelControl}
+div(class="{$controlClass} field no-label" style="padding-left: 60px")
+    | {$Input}{$Hint}
+| {/}
+= "\n"

From 7f5ae5a9c9c8964711bb115820d7ea8a1bc7a2ce Mon Sep 17 00:00:00 2001
From: Rickard Osser <ricky@osser.se>
Date: Tue, 22 Apr 2025 02:12:31 +0200
Subject: [PATCH 22/30] Fixed coding-style.

---
 demos/form-control/slider.php | 2 --
 src/Form/Control/Slider.php   | 8 +++-----
 2 files changed, 3 insertions(+), 7 deletions(-)

diff --git a/demos/form-control/slider.php b/demos/form-control/slider.php
index 2a0ed4a38f..e53181dcac 100644
--- a/demos/form-control/slider.php
+++ b/demos/form-control/slider.php
@@ -76,8 +76,6 @@
     ]
 );
 
-
-
 $form->addControl(
     'slider_custom',
     [
diff --git a/src/Form/Control/Slider.php b/src/Form/Control/Slider.php
index 3882478512..97f045b42f 100755
--- a/src/Form/Control/Slider.php
+++ b/src/Form/Control/Slider.php
@@ -10,7 +10,6 @@
 
 class Slider extends Input
 {
-
     public string $defaultInputTemplateVertical = 'form/layout/slider-vertical.html';
 
     public string $inputType = 'hidden';
@@ -39,8 +38,8 @@ class Slider extends Input
     /** @var 'number'|'letter' The type of label to display for a labeled slider. Can be number or letter. */
     public $labelType = 'number';
 
-    /** @var array|null An array of label values which restrict the displayed labels to only those which are defined. */
-    public $restrictedLabels;
+    /** @var array<string, mixed>|null An array of label values which restrict the displayed labels to only those which are defined. */
+    public $restrictedLabels = null;
 
     /** @vat bool Whether a tooltip should be shown to the thumb(s) on hover. Will contain the current slider value. */
     public bool $showThumbTooltip = false;
@@ -147,7 +146,6 @@ protected function init(): void
         } else {
             $this->owner->defaultInputTemplate = $this->defaultInputTemplateVertical;
             $this->owner->inputTemplate = $this->getApp()->loadTemplate($this->defaultInputTemplateVertical);
-            
             $this->slider->ui .= ' vertical slider';
             $this->slider->setAttr(['style' => 'height: ' . $this->verticalHeight . 'px']);
             if($this->verticalRightAligned) {
@@ -289,7 +287,7 @@ protected function init(): void
             $this->addClass('readOnly');
             $this->setAttr(['readOnly' => '']);
         }
-        if (!empty($onChange)) {
+        if (isset($onChange)) {
             $sliderSettings += $onChange;
         }
         $this->slider->js(true)->slider(

From 817ddf2508af3be5a56968dafcc805695cf39c98 Mon Sep 17 00:00:00 2001
From: Rickard Osser <ricky@osser.se>
Date: Tue, 22 Apr 2025 02:26:06 +0200
Subject: [PATCH 23/30] Fixed coding-style.

---
 demos/form-control/input2.php |  3 ++-
 src/Form/Control/Slider.php   | 39 ++++++++++++++++++-----------------
 2 files changed, 22 insertions(+), 20 deletions(-)

diff --git a/demos/form-control/input2.php b/demos/form-control/input2.php
index 80ead83b5e..7430494710 100644
--- a/demos/form-control/input2.php
+++ b/demos/form-control/input2.php
@@ -72,6 +72,7 @@
         'step' => 0.1,
         'start' => 0.5,
         'smooth' => true,
+        'color' => 'green',
         'caption' => 'Normal Slider',
     ]
 );
@@ -111,7 +112,7 @@
     ]
 );
 // We can add classes to a slider by doing:
-$disabledSlider->slider->addClass('red');
+$disabledSlider->input->addClass('red');
 
 $group = $form->addGroup('File upload');
 
diff --git a/src/Form/Control/Slider.php b/src/Form/Control/Slider.php
index 97f045b42f..14de96197d 100755
--- a/src/Form/Control/Slider.php
+++ b/src/Form/Control/Slider.php
@@ -119,9 +119,9 @@ class Slider extends Input
      */
     public $size = null;
 
-    /** @var View */
+    /** @var object The input object so it can be addressed from the code, ie addClass. */
 
-    public $slider;
+    public $input;
 
     /** @var object */
     private $owner;
@@ -136,45 +136,46 @@ protected function init(): void
 
         $this->owner = $this->getOwner();
         
-        $this->slider = View::addTo($this->owner);
+        $this->input = View::addTo($this->owner);
+
         if($this->reversed) {
-            $this->slider->ui = 'reversed';
+            $this->input->ui = 'reversed';
         }
         
         if (!$this->vertical) {
-            $this->slider->ui .= ' slider';
+            $this->input->ui .= ' slider';
         } else {
             $this->owner->defaultInputTemplate = $this->defaultInputTemplateVertical;
             $this->owner->inputTemplate = $this->getApp()->loadTemplate($this->defaultInputTemplateVertical);
-            $this->slider->ui .= ' vertical slider';
-            $this->slider->setAttr(['style' => 'height: ' . $this->verticalHeight . 'px']);
+            $this->input->ui .= ' vertical slider';
+            $this->input->setAttr(['style' => 'height: ' . $this->verticalHeight . 'px']);
             if($this->verticalRightAligned) {
-                $this->slider->addClass('right aligned');
+                $this->input->addClass('right aligned');
             }
         }
 
         if ($this->end) {
-            $this->slider->addClass('range');
+            $this->input->addClass('range');
         }
 
         if ($this->ticked) {
-            $this->slider->addClass('ticked');
+            $this->input->addClass('ticked');
         }
 
         if ($this->labeled) {
-            $this->slider->addClass('labeled');
+            $this->input->addClass('labeled');
         }
 
         if ($this->bottom) {
-            $this->slider->addClass('bottom aligned');
+            $this->input->addClass('bottom aligned');
         }
 
         if ($this->color) {
-            $this->slider->addClass($this->color);
+            $this->input->addClass($this->color);
         }
 
         if ($this->size) {
-            $this->slider->addClass($this->size);
+            $this->input->addClass($this->size);
         }
 
         $sliderSettings = [];
@@ -234,7 +235,7 @@ protected function init(): void
         }
 
         if ($this->disabled || $this->readOnly) {
-            $this->slider->addClass('disabled');
+            $this->input->addClass('disabled');
         }
 
         if (!$this->disabled) {
@@ -248,7 +249,7 @@ protected function init(): void
                         [
                             new JsExpression(
                                 $this->js()->find('input')->jsRender() . '.val($(\'div#\' + [] + \'\').slider(\'get thumbValue\', \'first\'))',
-                                [$this->slider->getHtmlId()]
+                                [$this->input->getHtmlId()]
                             ),
                         ]
                     ),
@@ -271,11 +272,11 @@ protected function init(): void
                             [
                                 new JsExpression(
                                     $this->js()->find('input')->jsRender() . '.val($(\'div#\' + [] + \'\').slider(\'get thumbValue\', \'first\'))',
-                                    [$this->slider->getHtmlId()]
+                                    [$this->input->getHtmlId()]
                                 ),
                                 new JsExpression(
                                     $this->endInput->js()->find('input')->jsRender() . '.val($(\'div#\' + [] + \'\').slider(\'get thumbValue\', \'second\'))',
-                                    [$this->slider->getHtmlId()]
+                                    [$this->input->getHtmlId()]
                                 ),
                             ]
                         ),
@@ -290,7 +291,7 @@ protected function init(): void
         if (isset($onChange)) {
             $sliderSettings += $onChange;
         }
-        $this->slider->js(true)->slider(
+        $this->input->js(true)->slider(
             $sliderSettings,
         );
     }

From 7f40ad0515f2f251af12d8e4ab686ba114097bf6 Mon Sep 17 00:00:00 2001
From: Rickard Osser <ricky@osser.se>
Date: Tue, 22 Apr 2025 02:50:18 +0200
Subject: [PATCH 24/30] Fixed error in demo, checking styles.

---
 demos/form-control/slider.php | 2 +-
 src/Form/Control/Slider.php   | 8 +++++---
 2 files changed, 6 insertions(+), 4 deletions(-)

diff --git a/demos/form-control/slider.php b/demos/form-control/slider.php
index e53181dcac..757c887f41 100644
--- a/demos/form-control/slider.php
+++ b/demos/form-control/slider.php
@@ -40,7 +40,7 @@
         'caption' => 'Blue ticked and labeled simple slider',
     ]
 );
-$slider2->slider->addClass('blue');
+$slider2->input->addClass('blue');
 
 $form->addControl(
     'slider_simple3',
diff --git a/src/Form/Control/Slider.php b/src/Form/Control/Slider.php
index 14de96197d..00790b2f5f 100755
--- a/src/Form/Control/Slider.php
+++ b/src/Form/Control/Slider.php
@@ -48,7 +48,7 @@ class Slider extends Input
      * Tooltip configuration used when showThumbTooltip is true
      * Refer to Tooltip Variations for possible values.
      *
-     * @var array|null
+     * @var array<string, mixed>|null
      */
     public $tooltipConfig;
 
@@ -92,7 +92,7 @@ class Slider extends Input
     /** Whether the slider should be vertical. */
     public bool $vertical = false;
 
-    /** @var string Default height for vertical slider. */
+    /** @var int Default height for vertical slider. */
     public $verticalHeight = 200;
 
     /** @var bool Right aligned vertical slider. Default true. */
@@ -105,7 +105,7 @@ class Slider extends Input
      * Custom interpreted labels.
      * Provide an array which will be used for populating the labels.
      *
-     * @var array|null
+     * @var array<string, mixed>|null
      */
     public $customLabels = null;
 
@@ -147,6 +147,8 @@ protected function init(): void
         } else {
             $this->owner->defaultInputTemplate = $this->defaultInputTemplateVertical;
             $this->owner->inputTemplate = $this->getApp()->loadTemplate($this->defaultInputTemplateVertical);
+            //var_dump($this->form->layout->inputTemplate);
+            
             $this->input->ui .= ' vertical slider';
             $this->input->setAttr(['style' => 'height: ' . $this->verticalHeight . 'px']);
             if($this->verticalRightAligned) {

From 99b314e230c382d43738fb844f1ba7f671d38302 Mon Sep 17 00:00:00 2001
From: Rickard Osser <ricky@osser.se>
Date: Tue, 22 Apr 2025 02:57:47 +0200
Subject: [PATCH 25/30] Fixed coding style, checking coding style.

---
 src/Form/Control/Slider.php | 22 ++++++++++------------
 1 file changed, 10 insertions(+), 12 deletions(-)

diff --git a/src/Form/Control/Slider.php b/src/Form/Control/Slider.php
index 00790b2f5f..e9f5891ea0 100755
--- a/src/Form/Control/Slider.php
+++ b/src/Form/Control/Slider.php
@@ -39,7 +39,7 @@ class Slider extends Input
     public $labelType = 'number';
 
     /** @var array<string, mixed>|null An array of label values which restrict the displayed labels to only those which are defined. */
-    public $restrictedLabels = null;
+    public $restrictedLabels;
 
     /** @vat bool Whether a tooltip should be shown to the thumb(s) on hover. Will contain the current slider value. */
     public bool $showThumbTooltip = false;
@@ -107,20 +107,20 @@ class Slider extends Input
      *
      * @var array<string, mixed>|null
      */
-    public $customLabels = null;
+    public $customLabels;
 
     /** @var string|null Color of the slider. */
     public $color;
 
     /**
      * Size of the slider.
-     * Can be: small, large, big, null is normal size.
-     * @var string|null 
+     * Can be: small, large, big, not set is normal size.
+     *
+     * @var string
      */
-    public $size = null;
+    public $size;
 
     /** @var object The input object so it can be addressed from the code, ie addClass. */
-
     public $input;
 
     /** @var object */
@@ -135,23 +135,21 @@ protected function init(): void
         parent::init();
 
         $this->owner = $this->getOwner();
-        
+
         $this->input = View::addTo($this->owner);
 
         if($this->reversed) {
             $this->input->ui = 'reversed';
         }
-        
+
         if (!$this->vertical) {
             $this->input->ui .= ' slider';
         } else {
             $this->owner->defaultInputTemplate = $this->defaultInputTemplateVertical;
             $this->owner->inputTemplate = $this->getApp()->loadTemplate($this->defaultInputTemplateVertical);
-            //var_dump($this->form->layout->inputTemplate);
-            
             $this->input->ui .= ' vertical slider';
             $this->input->setAttr(['style' => 'height: ' . $this->verticalHeight . 'px']);
-            if($this->verticalRightAligned) {
+            if ($this->verticalRightAligned) {
                 $this->input->addClass('right aligned');
             }
         }
@@ -243,7 +241,7 @@ protected function init(): void
         if (!$this->disabled) {
             // Set first input value, always present
             $this->set($this->start);
-            
+
             if (!$this->readOnly) {
                 $onChange = [
                     'onChange' => new JsFunction(

From e8539269de90327780f72c139e976fceb3ac7268 Mon Sep 17 00:00:00 2001
From: Rickard Osser <ricky@osser.se>
Date: Tue, 22 Apr 2025 02:59:45 +0200
Subject: [PATCH 26/30] Fixed coding style, checking coding style.

---
 src/Form/Control/Slider.php | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/Form/Control/Slider.php b/src/Form/Control/Slider.php
index e9f5891ea0..b66c89c6ad 100755
--- a/src/Form/Control/Slider.php
+++ b/src/Form/Control/Slider.php
@@ -138,7 +138,7 @@ protected function init(): void
 
         $this->input = View::addTo($this->owner);
 
-        if($this->reversed) {
+        if ($this->reversed) {
             $this->input->ui = 'reversed';
         }
 

From 5b68c4786aacd951e0660f3b788cfb6769f9d726 Mon Sep 17 00:00:00 2001
From: Rickard Osser <ricky@osser.se>
Date: Tue, 22 Apr 2025 03:04:58 +0200
Subject: [PATCH 27/30] Test of define.

---
 src/Form/Control/Slider.php | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/Form/Control/Slider.php b/src/Form/Control/Slider.php
index b66c89c6ad..19c0b28d3d 100755
--- a/src/Form/Control/Slider.php
+++ b/src/Form/Control/Slider.php
@@ -121,7 +121,7 @@ class Slider extends Input
     public $size;
 
     /** @var object The input object so it can be addressed from the code, ie addClass. */
-    public $input;
+    public object $input;
 
     /** @var object */
     private $owner;

From 48aa4584ea9cb750b1bfa3d172600b22cc018e9d Mon Sep 17 00:00:00 2001
From: Rickard Osser <ricky@osser.se>
Date: Tue, 22 Apr 2025 03:12:51 +0200
Subject: [PATCH 28/30] Test of define.

---
 src/Form/Control/Slider.php | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/Form/Control/Slider.php b/src/Form/Control/Slider.php
index 19c0b28d3d..2fb578f0b5 100755
--- a/src/Form/Control/Slider.php
+++ b/src/Form/Control/Slider.php
@@ -7,6 +7,7 @@
 use Atk4\Ui\Js\JsExpression;
 use Atk4\Ui\Js\JsFunction;
 use Atk4\Ui\View;
+use Atk4\Ui\Layout;
 
 class Slider extends Input
 {

From faa508ff7c8dde992432cfca306b320608b1d0f5 Mon Sep 17 00:00:00 2001
From: Rickard Osser <ricky@osser.se>
Date: Tue, 22 Apr 2025 08:05:44 +0200
Subject: [PATCH 29/30] Fixes for StaticAnalysis.

---
 demos/form-control/input2.php | 2 +-
 demos/form-control/slider.php | 3 ++-
 src/Form/Control/Slider.php   | 5 ++---
 3 files changed, 5 insertions(+), 5 deletions(-)

diff --git a/demos/form-control/input2.php b/demos/form-control/input2.php
index 7430494710..104f337020 100644
--- a/demos/form-control/input2.php
+++ b/demos/form-control/input2.php
@@ -112,7 +112,7 @@
     ]
 );
 // We can add classes to a slider by doing:
-$disabledSlider->input->addClass('red');
+$disabledSlider->input->addClass('red'); // @phpstan-ignore variable.undefined
 
 $group = $form->addGroup('File upload');
 
diff --git a/demos/form-control/slider.php b/demos/form-control/slider.php
index 757c887f41..216019d6a0 100644
--- a/demos/form-control/slider.php
+++ b/demos/form-control/slider.php
@@ -40,7 +40,8 @@
         'caption' => 'Blue ticked and labeled simple slider',
     ]
 );
-$slider2->input->addClass('blue');
+$slider2->input->addClass('blue'); // @phpstan-ignore variable.undefined
+
 
 $form->addControl(
     'slider_simple3',
diff --git a/src/Form/Control/Slider.php b/src/Form/Control/Slider.php
index 2fb578f0b5..f9062d0bc1 100755
--- a/src/Form/Control/Slider.php
+++ b/src/Form/Control/Slider.php
@@ -7,7 +7,6 @@
 use Atk4\Ui\Js\JsExpression;
 use Atk4\Ui\Js\JsFunction;
 use Atk4\Ui\View;
-use Atk4\Ui\Layout;
 
 class Slider extends Input
 {
@@ -146,8 +145,8 @@ protected function init(): void
         if (!$this->vertical) {
             $this->input->ui .= ' slider';
         } else {
-            $this->owner->defaultInputTemplate = $this->defaultInputTemplateVertical;
-            $this->owner->inputTemplate = $this->getApp()->loadTemplate($this->defaultInputTemplateVertical);
+            $this->owner->defaultInputTemplate = $this->defaultInputTemplateVertical; // @phpstan-ignore variable.undefined
+            $this->owner->inputTemplate = $this->getApp()->loadTemplate($this->defaultInputTemplateVertical); // @phpstan-ignore variable.undefined
             $this->input->ui .= ' vertical slider';
             $this->input->setAttr(['style' => 'height: ' . $this->verticalHeight . 'px']);
             if ($this->verticalRightAligned) {

From a3d83666c2a082904a5aad4632939a5aaed04603 Mon Sep 17 00:00:00 2001
From: Rickard Osser <ricky@osser.se>
Date: Tue, 22 Apr 2025 08:10:03 +0200
Subject: [PATCH 30/30] Fixes for StaticAnalysis.

---
 demos/form-control/input2.php | 2 +-
 demos/form-control/slider.php | 3 +--
 src/Form/Control/Slider.php   | 4 ++--
 3 files changed, 4 insertions(+), 5 deletions(-)

diff --git a/demos/form-control/input2.php b/demos/form-control/input2.php
index 104f337020..21f539e16a 100644
--- a/demos/form-control/input2.php
+++ b/demos/form-control/input2.php
@@ -112,7 +112,7 @@
     ]
 );
 // We can add classes to a slider by doing:
-$disabledSlider->input->addClass('red'); // @phpstan-ignore variable.undefined
+$disabledSlider->input->addClass('red'); // @phpstan-ignore property.notFound
 
 $group = $form->addGroup('File upload');
 
diff --git a/demos/form-control/slider.php b/demos/form-control/slider.php
index 216019d6a0..11c1345be4 100644
--- a/demos/form-control/slider.php
+++ b/demos/form-control/slider.php
@@ -40,8 +40,7 @@
         'caption' => 'Blue ticked and labeled simple slider',
     ]
 );
-$slider2->input->addClass('blue'); // @phpstan-ignore variable.undefined
-
+$slider2->input->addClass('blue'); // @phpstan-ignore property.notFound
 
 $form->addControl(
     'slider_simple3',
diff --git a/src/Form/Control/Slider.php b/src/Form/Control/Slider.php
index f9062d0bc1..869489ab13 100755
--- a/src/Form/Control/Slider.php
+++ b/src/Form/Control/Slider.php
@@ -145,8 +145,8 @@ protected function init(): void
         if (!$this->vertical) {
             $this->input->ui .= ' slider';
         } else {
-            $this->owner->defaultInputTemplate = $this->defaultInputTemplateVertical; // @phpstan-ignore variable.undefined
-            $this->owner->inputTemplate = $this->getApp()->loadTemplate($this->defaultInputTemplateVertical); // @phpstan-ignore variable.undefined
+            $this->owner->defaultInputTemplate = $this->defaultInputTemplateVertical; // @phpstan-ignore property.notFound
+            $this->owner->inputTemplate = $this->getApp()->loadTemplate($this->defaultInputTemplateVertical); // @phpstan-ignore property.notFound
             $this->input->ui .= ' vertical slider';
             $this->input->setAttr(['style' => 'height: ' . $this->verticalHeight . 'px']);
             if ($this->verticalRightAligned) {