# Perspective - strange beaviour of slider

**URL:** <https://forum.inductiveautomation.com/t/perspective-strange-beaviour-of-slider/96933>\
**Category:** Ignition\
**Tags:** ignition81, perspective\
**Created:** [October 7, 2024, 9:19pm UTC](https://forum.inductiveautomation.com/t/perspective-strange-beaviour-of-slider/96933 "2024-10-07T21:19:24Z")\
**Posts on this page:** 7\
**Page:** 1

<div class="post-metadata">

**Author:** ![Arzicc](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/arzicc/32/68311_2.png) [@Arzicc](https://forum.inductiveautomation.com/u/Arzicc)\
**Post date:** [October 7, 2024, 9:19pm UTC](https://forum.inductiveautomation.com/t/perspective-strange-beaviour-of-slider/96933/1 "2024-10-07T21:19:24Z")

</div>

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._

---

<div class="post-metadata">

**Author:** ![Arzicc](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/arzicc/32/68311_2.png) [@Arzicc](https://forum.inductiveautomation.com/u/Arzicc)\
**Post date:** [October 8, 2024, 1:03pm UTC](https://forum.inductiveautomation.com/t/perspective-strange-beaviour-of-slider/96933/2 "2024-10-08T13:03:36Z")

</div>

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](https://us1.discourse-cdn.com/inductiveautomation/original/3X/f/a/fa047bc18f6e17ac21c4d316909ea9439b4f3280.gif)

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?

---

<div class="post-metadata">

**Author:** ![Transistor](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/transistor/32/3380_2.png) [@Transistor](https://forum.inductiveautomation.com/u/Transistor)\
**Post date:** [October 8, 2024, 2:00pm UTC](https://forum.inductiveautomation.com/t/perspective-strange-beaviour-of-slider/96933/3 "2024-10-08T14:00:55Z")

</div>

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](https://forum.inductiveautomation.com/t/wiki-how-to-post-code-on-this-forum/77831).

---

<div class="post-metadata">

**Author:** ![Arzicc](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/arzicc/32/68311_2.png) [@Arzicc](https://forum.inductiveautomation.com/u/Arzicc)\
**Post date:** [October 9, 2024, 8:31am UTC](https://forum.inductiveautomation.com/t/perspective-strange-beaviour-of-slider/96933/4 "2024-10-09T08:31:04Z")

</div>

[SliderProblemHorizontal.zip](https://forum.inductiveautomation.com/uploads/short-url/iv88YroWpJUVDxlymIkqJTvtLUN.zip) (2.7 KB)

```python
{
  "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.

---

<div class="post-metadata">

**Author:** ![pascal.fragnoud](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/pascal.fragnoud/32/24728_2.png) [@pascal.fragnoud](https://forum.inductiveautomation.com/u/pascal.fragnoud)\
**Post date:** [October 9, 2024, 9:19am UTC](https://forum.inductiveautomation.com/t/perspective-strange-beaviour-of-slider/96933/5 "2024-10-09T09:19:21Z")

</div>

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](https://us1.discourse-cdn.com/inductiveautomation/original/3X/2/3/238c9a59e9ef58f9267b2d4b98b1fc6423d68926.gif)

---

<div class="post-metadata">

**Author:** ![Arzicc](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/arzicc/32/68311_2.png) [@Arzicc](https://forum.inductiveautomation.com/u/Arzicc)\
**Post date:** [October 9, 2024, 9:29am UTC](https://forum.inductiveautomation.com/t/perspective-strange-beaviour-of-slider/96933/6 "2024-10-09T09:29:55Z")

</div>

![HorizSliderProblemInDesigner](https://us1.discourse-cdn.com/inductiveautomation/original/3X/2/1/21fbc421ac2f8c711fab4c4560f0e15bb8f0d42b.png)  
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.

---

<div class="post-metadata">

**Author:** ![pascal.fragnoud](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/pascal.fragnoud/32/24728_2.png) [@pascal.fragnoud](https://forum.inductiveautomation.com/u/pascal.fragnoud)\
**Post date:** [October 9, 2024, 9:31am UTC](https://forum.inductiveautomation.com/t/perspective-strange-beaviour-of-slider/96933/7 "2024-10-09T09:31:43Z")

</div>

> [@Arzicc](#):
>
> I've noticed that in Designer the slider's selection box is offset.

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

> [@Arzicc](#):
>
> 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.

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