UI-Slider: Visual/Display issue when Thumb is set to Always

[arturv2000]

Current Behavior

If having the option Thumb set to Always there are some issues regarding the widget size

It will overlap with the previous component or group border.

Expected Behavior

No response

Steps To Reproduce

No response

Environment

• Dashboard version:
• Node-RED version:
• Node.js version:
• npm version:
• Platform/OS:
• Browser:

Have you provided an initial effort estimate for this issue?

I am not a FlowFuse team member

[joepavitt]

So, in the overlap of the group, the obvious solution is to show it above. For the other use cases though, what would you hope to see instead?

[arturv2000]

When it is configured to always maybe the widget height should be increased to be able to accommodate this element.

I know this will give different heights to different rows, but that already happens depending on widget type.

[hotNipi]

I'v taken the anatomy of the slider into bits and pieces.
Why it renders out of boundaries is caused by the row height which for dashboard is 8px smaller than vuetify standard.
Known that vuetify at least tries to serve all equally but for Node-RED dashboard the industrial kind of usage has to be valued more. That often requires much more condense layouts than a blog or news site.

There is a bit of waist for horizontal slider as for default slider there is no use of area for messages.

That can be forced down to 0 so the slider by nature will be rendered to the center, not that 6px too high.

But I don't really think that the thumb label overflow is that as big issue. And I'm against different row heights. I think most of the users don't like it.

Bigger issue is introduced with the ticks currently, I have tried to figure out some kind of solution but it's pretty hard.

Current solution renders tick per step thus if you have min=0, max=100 step =1, there will be 100 ticks overlap each over if the slider is not very long. And it is not responsive also. Overlap is unavoidable.
And there's also a bit of CSS which breaks first and last tick placement.

The tick count can't be told to the slider other that with setting tick labels. Label can be of course empty string so nothing but ticks are then visible. But to provide some kind of smartness behind it (based on min max and step) will be trap. Too many edge cases so I'm afraid it should be given to user to configure

 tickLabels: {
                    100: '100',
                    200: '',
                    300: '',
                    400: '',
                    500: '500',
                    600: '',
                    700: '',
                    800: '',
                    900: '',
                    1000: '1000'                
                },

Still - that only doesn't make it responsive - if to allow visible tick label values the numbers take way more space than small stripes so the overlap occurs way sooner.

I have dedicated solution made by using container query's. It looks for size available and hides some ticks as necessary.

@container range (max-width:360px) {
       /* hide all even ticks */        
       .range-slider .v-slider-track__tick:nth-child(even) {
           display: none;
       }
   }
   @container range (max-width:230px) {
       /* hide all ticks but not first and last*/
       .range-slider .v-slider-track__tick:not(.v-slider-track__tick--first,.v-slider-track__tick--last) {
           display: none;
       }
   }

But to make that kind of thing universal (support long numbers, string labels) ... really hard to decide what to do.

[arturv2000]

That can be forced down to 0 so the slider by nature will be rendered to the center, not that 6px too high.

I noticed that, not very critical, but yes, could be centered.

But I don't really think that the thumb label overflow is that as big issue. And I'm against different row heights. I think most of the users don't like it.

Well, if it overflows on top of other components like buttons and texts, visually I would say is important.

One obvious solution is to add a empty row (text component with no text to create a spacer) but that increases the overall space usage of the dashboard, that at this moment is already not very "compact".

Typically I used the browser with zoom at 80% so it doesn't seem so "big", but nowadays most sites have that issue that everything is "gigantic" and using almost all screen to show two or three elements... (Rant off...)

Maybe we need a spacer where we can define it's height?

Regarding row height being different, already happens, for example buttons and drop-down have different height, there are probably others. Most strange is that the first row seems to have a different height than the others (at least is placing several buttons, the first row button (on that group) has a different height to the other ones.

Regarding the steps, didn't try it, just tried with the defaults 0~10 and steps of 1.. seems alright for obvious reasons...

[hotNipi]

Different row heights mainly happen because of input elements and there is one line of css to fix them all. I'm away from computer but I definitely will share as soon I can.

[hotNipi]

The size of the thing must be chosen to satisfy desktop and mobile usage unless you don't provide different sites or radical layout difference for small and big screens.

[arturv2000]

Regaridng the ticks labels, this is something i used some time ago using ui-template

At the moment is not working correctly on Dashboard, and can't access at the momento to the PC where this was used (offline and out of site)

But, yes, eventually, by using something like this, to just show less ticks even without labels

tickLabelsTargetPressure: {
          1: '',
          2: '',
          3: '',
          4: '',
          5: '',
        },

Would solve the issue of too many ticks present, and it would be something from the user responsibility to get it rigth.

<template>
  <v-slider
    style="margin-top: 20px"
    v-model="valueTargetPressure"
    show-ticks="always"
    density="compact"
    step="0.1"
    :max="5"
    :min="1"
    tick-size="4"
    thumb-label="always"
    :ticks="tickLabelsTargetPressure"
    label="Target Pressure"
    @update:model-value="sendDataTargetPressure"
    ></v-slider>
</template>

<script>
  export default {
    data() {
      return {
        tickLabelsTargetPressure: {
          1: '1Bar',
          2: '2Bar',
          3: '3Bar',
          4: '4Bar',
          5: '5Bar',
        },
        valueTargetPressure: 1,
      }
    },
    methods: {
      sendDataTargetPressure: function (item) {
        console.log({ topic: 'TargetPressure', payload: item })
      },
    },
  }
</script>