Perspective - strange beaviour of slider

Ignition
,
1

Hello, today while I was trying Perspective out I've found the slider control acting strangely when in a certain arrangement. I don't know if it is a bug or just a misconfiguration on my part.

The view is a column flex container. There's a percent coordinate container in it. Inside the coordinate container there's a vertical slider.

The same happens with a root row flex container, a coordinate percent container in it, and a horizontal slider in it, same as the first situation but rotated so to speak.

What happens is that the slider does not work properly at runtime; as soon as you click on it, it goes to min or max and after that, you can't do anything more with it, it freezes there.

I've noticed this problem on a page with a hierarchy of flex containers when at a certain point I've decided to add a percent coordinate container to test one thing, but it also occurs inside a minimal view.

This issue does not occur with a fixed coord container.

Using 8.1.43. Tested with Edge 129.0.2792.79 and Firefox 131.0.

Correction - I thought the coord container had to be at second or more position, but after another test I've seen that it is not the case.

2

I've investigated a bit more today.
It seems that the slider's hit area's position is referenced to the view's (0,0), not its parent container's.

See the following GIF. The yellow circle around the pointer is on when I hold left mouse button.
Slider_PercentXYCont_FlexCont

The slider is in a percent XY container, contained in a row flex container, contained in a column flex container.

Is it a bug or a misconfiguration on my part?

3

Can you reproduce the problem in the simplest view that will demonstrate it and post the view here? See Wiki - how to post code on this forum.

4

SliderProblemHorizontal.zip (2.7 KB)

{
  "custom": {},
  "params": {},
  "props": {},
  "root": {
    "children": [
      {
        "children": [
          {
            "meta": {
              "name": "Slider"
            },
            "position": {
              "height": 0.04,
              "width": 0.8807,
              "x": 0.0452,
              "y": 0.8125
            },
            "type": "ia.input.slider"
          }
        ],
        "meta": {
          "name": "CoordinateContainer"
        },
        "position": {
          "basis": "33%"
        },
        "props": {
          "mode": "percent",
          "style": {
            "width": "300px"
          }
        },
        "type": "ia.container.coord"
      }
    ],
    "meta": {
      "name": "root"
    },
    "props": {
      "justify": "flex-end"
    },
    "type": "ia.container.flex"
  }
}

This is a simple view where I experience the problem. Row flex container, which contains a percent XY container, which contains a horizontal slider.
I've set XY container's basis to 33% and flex container's justify: flex-end so that the slider is to the right of the view. I'm experiencing the behaviour shown in the GIF.

5

I tried it, and I get some weird behavior as well.
The issue appears when the slider is in a coordinate container in percent mode, itself embedded in a flex container with either:

  • direction set to 'row' and justify set to anything but flex-start
  • direction set to 'row-reverse' and justify set to anything but flex-end

IF the coord container's flex-grow is 0 OR there's something else on its left.

For a vertical slider, it all stays true, but for columns instead of rows, and something above it instead of on its left.

Basically, it seems like it uses the mouse's coordinates in the view, not in the slider's container.

So, yea, the slider component is a mess

slider

6

HorizSliderProblemInDesigner
HorizSliderProblemInDesigner1123×731 41.5 KB

I've noticed that in Designer the slider's selection box is offset.

Oh and just for context, my PC's locale is not en-US, I have comma as decimal separator, I don't know if this is useful to know.

7

Yes I noticed that too. It's offset both vertically and horizontally in the setup I used for the gif above.

I doubt it, I'm on en-US and still get this behavior.