Double Range Slider in Perspective

Ignition
1

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
pafe-range-slider0752×230 7.33 KB

2 Likes
2

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

Double slider normal view

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

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 (13.8 KB)

10 Likes
3

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

4

Can you share the error message?

5

I was able to import the file now thanks !!

6

Hello!

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

Thanks!!!

7

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.

1 Like
8

thanks!!! appreciate it!

9

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 
{
  "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)