Merge pull request FlowFuse#1047 from hotNipi/main

fix slider ticks positioning and allow easy user level customization

docs/nodes/widgets/ui-slider.md

@@ -77,6 +77,42 @@ You can set the value of the slider by passing in the respective value in `msg.p
 ![Example of a slider with ticks set to 'Always'](/images/node-examples/ui-slider-ticks.png "Example of a slider with ticks set to 'Always'"){data-zoomable}
 *Example of a slider with ticks set to 'Always'*
 
+### Customize ticks
+
+Ticks can customized by overriding the CSS for slider.
+
+The appearance of ticks can be changed by using the following CSS variables
+
+- <code>--tick-scaleX</code> to resize ticks horizontally
+- <code>--tick-scaleY</code> to resize ticks vertically
+- <code>--tick-color</code> to change ticks color
+
+Note that you may need to create different classes for vertical and horizontal slider.
+
+
+```css
+.my-slider-horizontal.nrdb-ui-slider{
+    --tick-scaleX: 0.25;
+    --tick-scaleY: 4;
+    --tick-color: rgba(var(--v-theme-primary),0.7);
+}
+.my-slider-vertical.nrdb-ui-slider{
+    --tick-scaleX: 4;
+    --tick-scaleY: 0.25; 
+    --tick-color: orange;
+}
+```
+
+Different styles can be applied to the ticks of the filled part of the slider.
+
+```css
+.my-slider-horizontal.nrdb-ui-slider .v-slider-track__tick--filled{
+    --tick-color:violet;
+}
+```
+
+
+
 ## Example - Vertical Sliders
 
 Sliders will automatically switch to a vertical orientation when the height is greater than the width.

ui/src/stylesheets/common.css

@@ -366,34 +366,58 @@ NB! supresses the gridarea for messages, but those are not in use*/
    color: rgb(var(--v-theme-primary));
 }
 
-.v-slider-track__tick {
-    background-color: rgb(var(--v-theme-primary));
+.v-slider-track__tick,.v-slider-track__tick--filled { 
+    background-color:var(--tick-color,var(--nrdb-slider-track-color,rgba(var(--v-theme-primary),0.4)));
+    border-radius: var(--nrdb-silder-tick-border-radius, 0);
 }
-
-.v-slider-track__tick--filled {
-    background-color: rgb(var(--v-theme-on-primary));
+@supports (color: hsl(from red h s l / 40%)) {
+    .v-slider-track__tick,.v-slider-track__tick--filled{
+        background-color:var(--tick-color, hsl(from var(--nrdb-slider-track-color,rgb(var(--v-theme-primary))) h s l / 40%));        
+    }
 }
 
-.v-slider.v-input--horizontal .v-slider-track__tick {
-    width: var(v-slider-track__tick);
-    height: calc(var(--v-slider-track-size) + 4px);
+.nrdb-ui-slider .v-slider.v-input--horizontal{
+    grid-template-rows: auto 0;
+}
+.nrdb-ui-slider  .v-slider-track__ticks {
+    height: calc(var(--v-slider-tick-size));
+    z-index: -1;
+}
+.nrdb-ui-slider .v-slider.v-input--horizontal .v-slider-track__tick{
+    margin-block:unset;
+    transform: translate(calc(var(--v-slider-tick-size) / -2), 0)
+        scaleY(var(--tick-scaleY, var(--nrdb-slider-tick-scaleY))) 
+        scaleX(var(--tick-scaleX, var(--nrdb-slider-tick-scaleX)));
 }
 
-.v-slider.v-input--vertical .v-slider-track__tick {
-    height: var(v-slider-track__tick);
-    width: calc(var(--v-slider-track-size) + 4px);
+.nrdb-ui-slider .v-slider.v-input--horizontal .v-slider-track__tick--first {
+    margin-inline-start: calc(var(--v-slider-tick-size) / 2);
+}
+.nrdb-ui-slider .v-slider.v-input--horizontal .v-slider-track__tick--last {
+    margin-inline-start: calc(100% - var(--v-slider-tick-size) / 2);
+}
+.nrdb-ui-slider .v-slider.v-input--vertical .v-slider-track__ticks {
+    height: 100%;
+    width: calc(var(--v-slider-tick-size));
 }
 
-/* re-calculate the margin for the thumb */
-.v-slider.v-input--horizontal .v-slider-track__tick {
-    margin-inline-start: 0;
-    margin-top: 0px;
+.nrdb-ui-slider .v-slider.v-input--vertical .v-slider-track__tick{
+    margin-inline: unset;
+    transform: translate(0,calc(var(--v-slider-tick-size) / 2))
+        scaleY(var(--tick-scaleY, var(--nrdb-slider-tick-scaleY))) 
+        scaleX(var(--tick-scaleX, var(--nrdb-slider-tick-scaleX)));
+} 
+.nrdb-ui-slider .v-slider.v-input--vertical .v-slider-track__tick--last {
+    bottom: calc(100% - var(--v-slider-tick-size) / 2);
+}
+.nrdb-ui-slider .v-slider.v-input--vertical .v-slider-track__tick--first {
+    bottom: calc(0% + var(--v-slider-tick-size) / 2);
 }
 
-.v-slider.v-input--vertical .v-slider-track__tick {
-    margin-inline-start: 0;
-    margin-left: 0px;
+.nrdb-ui-slider .v-slider-track {
+    --v-slider-tick-size: var(--v-slider-track-size);
 }
+
 .v-slider.v-input--vertical>.v-input__control {
     min-height: initial;
 }

ui/src/widgets/ui-slider/UISlider.vue

@@ -3,8 +3,9 @@
 <template>
     <v-slider
         v-model="value" :disabled="!state.enabled" :label="label" hide-details="auto"
-        :class="className" :thumb-label="thumbLabel"
+        :class="className" :style="`--nrdb-slider-track-color:${colorTrack};--nrdb-slider-tick-scaleY:${tickScaleY};--nrdb-slider-tick-scaleX:${tickScaleX};`" :thumb-label="thumbLabel"
         :min="min" :direction="direction"
+        :tick-size="4" :track-size="4"
         :color="color" :track-color="colorTrack" :thumb-color="colorThumb"
         :max="max" :step="step || 1" :show-ticks="showTicks" @update:model-value="onChange"
         @end="onBlur"
@@ -47,6 +48,12 @@ export default {
         direction: function () {
             return this.props.height > this.props.width ? 'vertical' : 'horizontal'
         },
+        tickScaleX: function () {
+            return this.props.height > this.props.width ? 3 : 0.5
+        },
+        tickScaleY: function () {
+            return this.props.height > this.props.width ? 0.5 : 3
+        },
         label: function () {
             return this.dynamic.label !== null ? this.dynamic.label : this.props.label
         },