# Double Range Slider in Perspective

**URL:** <https://forum.inductiveautomation.com/t/double-range-slider-in-perspective/62071>\
**Category:** Ignition\
**Tags:** perspective\
**Created:** [July 19, 2022, 4:32pm UTC](https://forum.inductiveautomation.com/t/double-range-slider-in-perspective/62071 "2022-07-19T16:32:51Z")\
**Posts on this page:** 9\
**Page:** 1

<div class="post-metadata">

**Author:** ![nader.chinichian](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/nader.chinichian/32/9261_2.png) [@nader.chinichian](https://forum.inductiveautomation.com/u/nader.chinichian)\
**Post date:** [July 19, 2022, 4:32pm UTC](https://forum.inductiveautomation.com/t/double-range-slider-in-perspective/62071/1 "2022-07-19T16:32:51Z")

</div>

Hi,  
Is anyone know how to have a double range slider in perspective?  
I tried to create it with mouse drag event but it is too slow over the internet.  
I wonder if anyone has a module for it.  
Thanks for any help or advance

 ![pafe-range-slider0](https://us1.discourse-cdn.com/inductiveautomation/original/3X/d/5/d54c8766ef3836cf3682b802579983de299b9e69.png)

---

<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:** [July 23, 2022, 4:13pm UTC](https://forum.inductiveautomation.com/t/double-range-slider-in-perspective/62071/2 "2022-07-23T16:13:26Z")

</div>

After a lot of shameful messing around I came up with this.

![Double slider normal view](https://us1.discourse-cdn.com/inductiveautomation/original/3X/f/2/f20cf3422d523a6ba93a065d3ec4213d8a25114a.gif)

It consists of five component elements:

- A linear scale.
- A label to generate the blue track.
- A label to generate the grey track at the right hand side.
- The range start (lower) slider.
- The range end (upper) slider.

If you select the view’s debug parameter you will get this to reveal to operation.

![Double slider debug view](https://us1.discourse-cdn.com/inductiveautomation/original/3X/9/e/9ed1e69db315db982a17b948d5adfef3e95ad20b.gif)

Moving the sliders triggers the onActionPerformed event. Both of these call a message handler attached to the lower slider.

In its current configuration it doesn’t allow the range to be a single point.

Here’s the project.  
[Perspective\_DoubleSlider\_demo\_2022-07-23\_1705.zip](https://forum.inductiveautomation.com/uploads/short-url/nZVHKWJFYpEi4h9jouVUmGibhlJ.zip) (13.8 KB)

---

<div class="post-metadata">

**Author:** ![Raghavendra\_Praneeth](https://avatars.discourse-cdn.com/v4/letter/r/87869e/32.png) [@Raghavendra\_Praneeth](https://forum.inductiveautomation.com/u/Raghavendra_Praneeth)\
**Post date:** [May 20, 2024, 12:06am UTC](https://forum.inductiveautomation.com/t/double-range-slider-in-perspective/62071/3 "2024-05-20T00:06:48Z")

</div>

Could you please let me know how to import this .zip file ? I tried to import but I was unable to

---

<div class="post-metadata">

**Author:** ![Ujwal\_Wankhede](https://avatars.discourse-cdn.com/v4/letter/u/4af34b/32.png) [@Ujwal\_Wankhede](https://forum.inductiveautomation.com/u/Ujwal_Wankhede)\
**Post date:** [May 20, 2024, 1:54am UTC](https://forum.inductiveautomation.com/t/double-range-slider-in-perspective/62071/4 "2024-05-20T01:54:24Z")

</div>

Can you share the error message?

---

<div class="post-metadata">

**Author:** ![Raghavendra\_Praneeth](https://avatars.discourse-cdn.com/v4/letter/r/87869e/32.png) [@Raghavendra\_Praneeth](https://forum.inductiveautomation.com/u/Raghavendra_Praneeth)\
**Post date:** [May 20, 2024, 1:38pm UTC](https://forum.inductiveautomation.com/t/double-range-slider-in-perspective/62071/5 "2024-05-20T13:38:53Z")

</div>

I was able to import the file now thanks !!

---

<div class="post-metadata">

**Author:** ![Jose\_Hervas\_Chico](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/jose_hervas_chico/32/69260_2.png) [@Jose\_Hervas\_Chico](https://forum.inductiveautomation.com/u/Jose_Hervas_Chico)\
**Post date:** [April 22, 2025, 9:13am UTC](https://forum.inductiveautomation.com/t/double-range-slider-in-perspective/62071/6 "2025-04-22T09:13:06Z")

</div>

Hello!

and what if we want to do a double time slider to select a time interval?

Thanks!!!

---

<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:** [April 22, 2025, 10:47am UTC](https://forum.inductiveautomation.com/t/double-range-slider-in-perspective/62071/7 "2025-04-22T10:47:53Z")

</div>

You could use my double slider to select hours (but not hours and minutes).  
Assuming you want to select an hours range between 00:00 and 24:00:

- On the view set `params.min : 0` and `params.max : 24`.
- On the linear scale component set `majorTicks.span : 4` to get 4-hour number intervals or whatever you want. (The slider will still move in 1-hour steps.)

You will use `custom.rangeStart` and `custom.rangeEnd` in bindings wherever you need them.

---

<div class="post-metadata">

**Author:** ![Jose\_Hervas\_Chico](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/jose_hervas_chico/32/69260_2.png) [@Jose\_Hervas\_Chico](https://forum.inductiveautomation.com/u/Jose_Hervas_Chico)\
**Post date:** [April 22, 2025, 11:35am UTC](https://forum.inductiveautomation.com/t/double-range-slider-in-perspective/62071/8 "2025-04-22T11:35:55Z")

</div>

> [@Transistor](#):
>
> r to select hours (but not hours and minutes).  
> Assuming you want to select an hours range between 00:00 and 24:00:
> 
> - On the view set `params.min : 0` and `params.max : 24`.

thanks!!! appreciate it!

---

<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:** [April 22, 2025, 1:48pm UTC](https://forum.inductiveautomation.com/t/double-range-slider-in-perspective/62071/9 "2025-04-22T13:48:18Z")

</div>

I did something weird like this a while ago. Probably much dirtier than that... IIRC the css's basis of each slider is computed depending on some ratio. I don't remember exactly how it works...  
Never got to really use it.

> **view's json**
>
> ```json
> {
> "custom": {
> "mid": 35.18,
> "step": 0.05,
> "top_ratio": 79.64
> },
> "params": {
> "bot": 30.45,
> "max": 75,
> "min": 25,
> "top": 39.91
> },
> "propConfig": {
> "custom.mid": {
> "binding": {
> "config": {
> "expression": "{view.params.bot} + ({view.params.top} - {view.params.bot}) / 2"
> },
> "type": "expr"
> },
> "persistent": true
> },
> "custom.step": {
> "binding": {
> "config": {
> "expression": "({view.params.max} - {view.params.min}) / 1000"
> },
> "type": "expr"
> },
> "persistent": true
> },
> "custom.top_ratio": {
> "binding": {
> "config": {
> "expression": "({view.params.max} - {view.custom.mid})\r\n/ ({view.params.max} - {view.params.min}) * 100"
> },
> "type": "expr"
> },
> "persistent": true
> },
> "params.bot": {
> "paramDirection": "inout",
> "persistent": true
> },
> "params.max": {
> "paramDirection": "input",
> "persistent": true
> },
> "params.min": {
> "paramDirection": "input",
> "persistent": true
> },
> "params.top": {
> "paramDirection": "inout",
> "persistent": true
> }
> },
> "props": {
> "defaultSize": {
> "width": 63
> }
> },
> "root": {
> "children": [
> {
> "meta": {
> "name": "Slider_top"
> },
> "position": {
> "shrink": 0
> },
> "propConfig": {
> "position.basis": {
> "binding": {
> "config": {
> "expression": "({view.custom.top_ratio}) + \"%\""
> },
> "type": "expr"
> }
> },
> "props.max": {
> "binding": {
> "config": {
> "path": "view.params.max"
> },
> "type": "property"
> }
> },
> "props.min": {
> "binding": {
> "config": {
> "path": "view.custom.mid"
> },
> "type": "property"
> }
> },
> "props.step": {
> "binding": {
> "config": {
> "path": "view.custom.step"
> },
> "type": "property"
> }
> },
> "props.value": {
> "binding": {
> "config": {
> "bidirectional": true,
> "path": "view.params.top"
> },
> "type": "property"
> }
> }
> },
> "props": {
> "orientation": "vertical",
> "trackColor": "#7ACBF3"
> },
> "type": "ia.input.slider"
> },
> {
> "meta": {
> "name": "Slider_bot"
> },
> "position": {
> "shrink": 0
> },
> "propConfig": {
> "position.basis": {
> "binding": {
> "config": {
> "expression": "(100 - {view.custom.top_ratio}) + \"%\""
> },
> "type": "expr"
> }
> },
> "props.max": {
> "binding": {
> "config": {
> "path": "view.custom.mid"
> },
> "type": "property"
> }
> },
> "props.min": {
> "binding": {
> "config": {
> "path": "view.params.min"
> },
> "type": "property"
> }
> },
> "props.step": {
> "binding": {
> "config": {
> "path": "view.custom.step"
> },
> "type": "property"
> }
> },
> "props.value": {
> "binding": {
> "config": {
> "bidirectional": true,
> "path": "view.params.bot"
> },
> "type": "property"
> }
> }
> },
> "props": {
> "orientation": "vertical",
> "railColor": "#7ACBF3",
> "trackColor": "#BBBBBB"
> },
> "type": "ia.input.slider"
> }
> ],
> "meta": {
> "name": "root"
> },
> "props": {
> "direction": "column",
> "style": {
> "padding": "20px"
> }
> },
> "type": "ia.container.flex"
> }
> }
> 
> ```

the view takes a `min` and `max` parameters, and outputs `bot` and `top` parameters for each handle (it's a vertical slider... But they should probably be renamed to high and low, or something similar)