# Amount Slider

A bounded slider for process quantities and setpoints.

## Installation

Download: /api/catalog/amount-slider/download

Ignition Perspective 8.3. In a development project, choose Designer > File > Import and select the ZIP. Preserve the view and style-class paths. Review resource conflicts before replacing anything.

No separate stylesheet snippet is included.

Add an Embedded View (ia.display.view), set props.path to Packs/AmountSlider/AmountSlider, and configure props.params using the contract below. Connect your own data in the host view. The package does not include live tags, page configuration or Gateway settings.

## Parameters

Types are inferred from saved defaults; directions come from native propConfig. These are not full schemas or validated ranges.

| Parameter | Type | Direction | Default |

| --- | --- | --- | --- |

| min | number | input | 5 |

| max | number | input | 60 |

| value | number | input-output | 40 |

| step | number | input | 5 |

| stops | string | input | "5,10,15,20,25,30,35,40,45,50,55,60" |

| accent | string | input | "#fafafa" |

| disabled | boolean | input | false |

| showTicks | boolean | input | true |

| reduceMotion | boolean | input | false |

| unitLabel | string | input | "/ month" |

## Embedded View usage

```json

{
  "type": "ia.display.view",
  "props": {
    "path": "Packs/AmountSlider/AmountSlider",
    "params": {
      "min": 5,
      "max": 60,
      "value": 40,
      "step": 5,
      "stops": "5,10,15,20,25,30,35,40,45,50,55,60",
      "accent": "#fafafa",
      "disabled": false,
      "showTicks": true,
      "reduceMotion": false,
      "unitLabel": "/ month"
    },
    "useDefaultViewWidth": false,
    "useDefaultViewHeight": false
  }
}

```

## Verification

Source and archive hashes are checked. Designer import acceptance has not been completed for this archive; test in your development project before production.

## Files

### com.inductiveautomation.perspective/views/Packs/AmountSlider/AmountSlider/view.json

```json

{
  "custom": {
    "val": 40
  },
  "params": {
    "min": 5,
    "max": 60,
    "value": 40,
    "step": 5,
    "stops": "5,10,15,20,25,30,35,40,45,50,55,60",
    "accent": "#fafafa",
    "disabled": false,
    "showTicks": true,
    "reduceMotion": false,
    "unitLabel": "/ month"
  },
  "propConfig": {
    "params.min": {
      "paramDirection": "input",
      "persistent": true
    },
    "params.max": {
      "paramDirection": "input",
      "persistent": true
    },
    "params.value": {
      "paramDirection": "input-output",
      "persistent": true
    },
    "params.step": {
      "paramDirection": "input",
      "persistent": true
    },
    "params.stops": {
      "paramDirection": "input",
      "persistent": true
    },
    "params.accent": {
      "paramDirection": "input",
      "persistent": true
    },
    "params.disabled": {
      "paramDirection": "input",
      "persistent": true
    },
    "params.showTicks": {
      "paramDirection": "input",
      "persistent": true
    },
    "params.reduceMotion": {
      "paramDirection": "input",
      "persistent": true
    },
    "params.unitLabel": {
      "paramDirection": "input",
      "persistent": true
    }
  },
  "props": {
    "defaultSize": {
      "width": 420,
      "height": 120
    }
  },
  "root": {
    "type": "ia.container.flex",
    "version": 0,
    "meta": {
      "name": "root"
    },
    "props": {
      "direction": "column",
      "alignItems": "stretch",
      "style": {
        "gap": "10px",
        "width": "100%",
        "overflow": "visible"
      }
    },
    "children": [
      {
        "type": "ia.display.label",
        "version": 0,
        "meta": {
          "name": "inlineReadout"
        },
        "props": {
          "text": "$40 / month",
          "style": {
            "color": "#fafafa",
            "fontSize": "48px",
            "fontWeight": "700",
            "fontVariantNumeric": "tabular-nums",
            "width": "100%",
            "textAlign": "center",
            "marginBottom": "12px",
            "letterSpacing": "-0.03em"
          }
        },
        "position": {
          "grow": 0,
          "shrink": 0,
          "basis": "auto"
        },
        "propConfig": {
          "props.text": {
            "binding": {
              "type": "expr",
              "config": {
                "expression": "\"$\"+toString({view.custom.val})+\" \"+{view.params.unitLabel}"
              }
            }
          }
        }
      },
      {
        "type": "ia.container.flex",
        "version": 0,
        "meta": {
          "name": "trackWrap"
        },
        "props": {
          "direction": "row",
          "alignItems": "center",
          "style": {
            "classes": "vc/amount-track-wrap",
            "position": "relative",
            "display": "block",
            "width": "100%",
            "height": "28px",
            "overflow": "visible"
          }
        },
        "position": {
          "grow": 0,
          "shrink": 0,
          "basis": "28px"
        },
        "children": [
          {
            "type": "ia.display.label",
            "version": 0,
            "meta": {
              "name": "track"
            },
            "props": {
              "text": "",
              "style": {
                "classes": "vc/amount-track",
                "position": "absolute",
                "left": "9px",
                "top": "10px",
                "height": "8px",
                "borderRadius": "999px",
                "backgroundColor": "#27272a",
                "width": "calc(100% - 18px)",
                "zIndex": "0"
              }
            },
            "position": {
              "grow": 1,
              "shrink": 1,
              "basis": "auto"
            }
          },
          {
            "type": "ia.display.label",
            "version": 0,
            "meta": {
              "name": "fill"
            },
            "props": {
              "text": "",
              "style": {
                "classes": "vc/amount-fill",
                "position": "absolute",
                "left": "9px",
                "top": "10px",
                "height": "8px",
                "borderRadius": "999px",
                "backgroundColor": "#fafafa",
                "width": "calc((100% - 18px) * 0.6364)",
                "zIndex": "1"
              }
            },
            "position": {
              "grow": 0,
              "shrink": 0,
              "basis": "auto"
            },
            "propConfig": {
              "props.style.width": {
                "binding": {
                  "type": "expr",
                  "config": {
                    "expression": "\"calc((100% - 18px) * \" + toString(round((({view.custom.val}-{view.params.min})/max(0.001,{view.params.max}-{view.params.min})),4)) + \")\""
                  }
                }
              },
              "props.style.backgroundColor": {
                "binding": {
                  "type": "expr",
                  "config": {
                    "expression": "if(len(trim(toString({view.params.accent})))>0,{view.params.accent},\"#fafafa\")"
                  }
                }
              }
            }
          },
          {
            "type": "ia.display.label",
            "version": 0,
            "meta": {
              "name": "thumb"
            },
            "props": {
              "text": "",
              "style": {
                "classes": "vc/amount-thumb",
                "position": "absolute",
                "top": "5px",
                "width": "18px",
                "height": "18px",
                "borderRadius": "999px",
                "backgroundColor": "#fafafa",
                "borderStyle": "solid",
                "borderWidth": "2px",
                "borderColor": "#18181b",
                "zIndex": "2",
                "left": "calc((100% - 18px) * 0.6364)",
                "boxSizing": "border-box"
              }
            },
            "position": {
              "grow": 0,
              "shrink": 0,
              "basis": "18px"
            },
            "propConfig": {
              "props.style.left": {
                "binding": {
                  "type": "expr",
                  "config": {
                    "expression": "\"calc((100% - 18px) * \" + toString(round((({view.custom.val}-{view.params.min})/max(0.001,{view.params.max}-{view.params.min})),4)) + \")\""
                  }
                }
              }
            }
          },
          {
            "type": "ia.input.slider",
            "version": 0,
            "meta": {
              "name": "hit"
            },
            "props": {
              "value": 40,
              "step": 5,
              "orientation": "horizontal",
              "style": {
                "classes": "vc/amount-slider-hit",
                "position": "relative",
                "width": "calc(100% - 18px)",
                "height": "100%",
                "opacity": "0",
                "zIndex": "3",
                "margin": "0 9px"
              },
              "min": 5,
              "max": 60
            },
            "position": {
              "grow": 1,
              "shrink": 1,
              "basis": "100%"
            },
            "propConfig": {
              "props.value": {
                "binding": {
                  "type": "property",
                  "config": {
                    "path": "view.custom.val",
                    "bidirectional": true
                  }
                }
              },
              "props.step": {
                "binding": {
                  "type": "property",
                  "config": {
                    "path": "view.params.step"
                  }
                }
              },
              "props.enabled": {
                "binding": {
                  "type": "expr",
                  "config": {
                    "expression": "!{view.params.disabled}"
                  }
                }
              },
              "props.min": {
                "binding": {
                  "type": "property",
                  "config": {
                    "path": "view.params.min"
                  }
                }
              },
              "props.max": {
                "binding": {
                  "type": "property",
                  "config": {
                    "path": "view.params.max"
                  }
                }
              }
            },
            "events": {
              "component": {
                "onChange": {
                  "type": "script",
                  "scope": "G",
                  "config": {
                    "script": "try:\n\tval = float(self.props.value)\n\tmn = float(self.view.params.min)\n\tmx = float(self.view.params.max)\n\tstep = float(self.view.params.step)\n\tif step <= 0: step = 1.0\n\tsnapped = int(round((val - mn) / step) * step + mn)\n\tif snapped < mn: snapped = int(mn)\n\tif snapped > mx: snapped = int(mx)\n\tself.view.custom.val = snapped\n\tself.view.params.value = snapped\n\ttry:\n\t\tself.session.custom.amount = snapped\n\texcept:\n\t\tpass\n\ttry:\n\t\tsystem.perspective.sendMessage('vc-amount-change', {'value': snapped}, scope='page')\n\texcept:\n\t\tpass\nexcept:\n\tpass\n"
                  }
                }
              }
            }
          }
        ]
      },
      {
        "type": "ia.container.flex",
        "version": 0,
        "meta": {
          "name": "ticks"
        },
        "props": {
          "direction": "row",
          "justify": "space-between",
          "alignItems": "center",
          "style": {
            "width": "100%",
            "height": "8px",
            "padding": "0 9px",
            "boxSizing": "border-box"
          }
        },
        "position": {
          "grow": 0,
          "shrink": 0,
          "basis": "8px"
        },
        "propConfig": {
          "meta.visible": {
            "binding": {
              "type": "property",
              "config": {
                "path": "view.params.showTicks"
              }
            }
          }
        },
        "children": [
          {
            "type": "ia.container.flex",
            "version": 0,
            "meta": {
              "name": "tick5"
            },
            "props": {
              "direction": "column",
              "alignItems": "center",
              "justify": "center",
              "style": {
                "classes": "vc/amount-tick",
                "width": "2px",
                "height": "6px",
                "backgroundColor": "#3f3f46",
                "borderRadius": "1px"
              }
            },
            "position": {
              "grow": 0,
              "shrink": 0,
              "basis": "2px"
            },
            "propConfig": {
              "props.style.backgroundColor": {
                "binding": {
                  "type": "expr",
                  "config": {
                    "expression": "if({view.custom.val} >= 5, \"#a1a1aa\", \"#3f3f46\")"
                  }
                }
              },
              "meta.visible": {
                "binding": {
                  "type": "property",
                  "config": {
                    "path": "view.params.showTicks"
                  }
                }
              }
            }
          },
          {
            "type": "ia.container.flex",
            "version": 0,
            "meta": {
              "name": "tick10"
            },
            "props": {
              "direction": "column",
              "alignItems": "center",
              "justify": "center",
              "style": {
                "classes": "vc/amount-tick",
                "width": "2px",
                "height": "6px",
                "backgroundColor": "#3f3f46",
                "borderRadius": "1px"
              }
            },
            "position": {
              "grow": 0,
              "shrink": 0,
              "basis": "2px"
            },
            "propConfig": {
              "props.style.backgroundColor": {
                "binding": {
                  "type": "expr",
                  "config": {
                    "expression": "if({view.custom.val} >= 10, \"#a1a1aa\", \"#3f3f46\")"
                  }
                }
              },
              "meta.visible": {
                "binding": {
                  "type": "property",
                  "config": {
                    "path": "view.params.showTicks"
                  }
                }
              }
            }
          },
          {
            "type": "ia.container.flex",
            "version": 0,
            "meta": {
              "name": "tick15"
            },
            "props": {
              "direction": "column",
              "alignItems": "center",
              "justify": "center",
              "style": {
                "classes": "vc/amount-tick",
                "width": "2px",
                "height": "6px",
                "backgroundColor": "#3f3f46",
                "borderRadius": "1px"
              }
            },
            "position": {
              "grow": 0,
              "shrink": 0,
              "basis": "2px"
            },
            "propConfig": {
              "props.style.backgroundColor": {
                "binding": {
                  "type": "expr",
                  "config": {
                    "expression": "if({view.custom.val} >= 15, \"#a1a1aa\", \"#3f3f46\")"
                  }
                }
              },
              "meta.visible": {
                "binding": {
                  "type": "property",
                  "config": {
                    "path": "view.params.showTicks"
                  }
                }
              }
            }
          },
          {
            "type": "ia.container.flex",
            "version": 0,
            "meta": {
              "name": "tick20"
            },
            "props": {
              "direction": "column",
              "alignItems": "center",
              "justify": "center",
              "style": {
                "classes": "vc/amount-tick",
                "width": "2px",
                "height": "6px",
                "backgroundColor": "#3f3f46",
                "borderRadius": "1px"
              }
            },
            "position": {
              "grow": 0,
              "shrink": 0,
              "basis": "2px"
            },
            "propConfig": {
              "props.style.backgroundColor": {
                "binding": {
                  "type": "expr",
                  "config": {
                    "expression": "if({view.custom.val} >= 20, \"#a1a1aa\", \"#3f3f46\")"
                  }
                }
              },
              "meta.visible": {
                "binding": {
                  "type": "property",
                  "config": {
                    "path": "view.params.showTicks"
                  }
                }
              }
            }
          },
          {
            "type": "ia.container.flex",
            "version": 0,
            "meta": {
              "name": "tick25"
            },
            "props": {
              "direction": "column",
              "alignItems": "center",
              "justify": "center",
              "style": {
                "classes": "vc/amount-tick",
                "width": "2px",
                "height": "6px",
                "backgroundColor": "#3f3f46",
                "borderRadius": "1px"
              }
            },
            "position": {
              "grow": 0,
              "shrink": 0,
              "basis": "2px"
            },
            "propConfig": {
              "props.style.backgroundColor": {
                "binding": {
                  "type": "expr",
                  "config": {
                    "expression": "if({view.custom.val} >= 25, \"#a1a1aa\", \"#3f3f46\")"
                  }
                }
              },
              "meta.visible": {
                "binding": {
                  "type": "property",
                  "config": {
                    "path": "view.params.showTicks"
                  }
                }
              }
            }
          },
          {
            "type": "ia.container.flex",
            "version": 0,
            "meta": {
              "name": "tick30"
            },
            "props": {
              "direction": "column",
              "alignItems": "center",
              "justify": "center",
              "style": {
                "classes": "vc/amount-tick",
                "width": "2px",
                "height": "6px",
                "backgroundColor": "#3f3f46",
                "borderRadius": "1px"
              }
            },
            "position": {
              "grow": 0,
              "shrink": 0,
              "basis": "2px"
            },
            "propConfig": {
              "props.style.backgroundColor": {
                "binding": {
                  "type": "expr",
                  "config": {
                    "expression": "if({view.custom.val} >= 30, \"#a1a1aa\", \"#3f3f46\")"
                  }
                }
              },
              "meta.visible": {
                "binding": {
                  "type": "property",
                  "config": {
                    "path": "view.params.showTicks"
                  }
                }
              }
            }
          },
          {
            "type": "ia.container.flex",
            "version": 0,
            "meta": {
              "name": "tick35"
            },
            "props": {
              "direction": "column",
              "alignItems": "center",
              "justify": "center",
              "style": {
                "classes": "vc/amount-tick",
                "width": "2px",
                "height": "6px",
                "backgroundColor": "#3f3f46",
                "borderRadius": "1px"
              }
            },
            "position": {
              "grow": 0,
              "shrink": 0,
              "basis": "2px"
            },
            "propConfig": {
              "props.style.backgroundColor": {
                "binding": {
                  "type": "expr",
                  "config": {
                    "expression": "if({view.custom.val} >= 35, \"#a1a1aa\", \"#3f3f46\")"
                  }
                }
              },
              "meta.visible": {
                "binding": {
                  "type": "property",
                  "config": {
                    "path": "view.params.showTicks"
                  }
                }
              }
            }
          },
          {
            "type": "ia.container.flex",
            "version": 0,
            "meta": {
              "name": "tick40"
            },
            "props": {
              "direction": "column",
              "alignItems": "center",
              "justify": "center",
              "style": {
                "classes": "vc/amount-tick",
                "width": "2px",
                "height": "6px",
                "backgroundColor": "#3f3f46",
                "borderRadius": "1px"
              }
            },
            "position": {
              "grow": 0,
              "shrink": 0,
              "basis": "2px"
            },
            "propConfig": {
              "props.style.backgroundColor": {
                "binding": {
                  "type": "expr",
                  "config": {
                    "expression": "if({view.custom.val} >= 40, \"#a1a1aa\", \"#3f3f46\")"
                  }
                }
              },
              "meta.visible": {
                "binding": {
                  "type": "property",
                  "config": {
                    "path": "view.params.showTicks"
                  }
                }
              }
            }
          },
          {
            "type": "ia.container.flex",
            "version": 0,
            "meta": {
              "name": "tick45"
            },
            "props": {
              "direction": "column",
              "alignItems": "center",
              "justify": "center",
              "style": {
                "classes": "vc/amount-tick",
                "width": "2px",
                "height": "6px",
                "backgroundColor": "#3f3f46",
                "borderRadius": "1px"
              }
            },
            "position": {
              "grow": 0,
              "shrink": 0,
              "basis": "2px"
            },
            "propConfig": {
              "props.style.backgroundColor": {
                "binding": {
                  "type": "expr",
                  "config": {
                    "expression": "if({view.custom.val} >= 45, \"#a1a1aa\", \"#3f3f46\")"
                  }
                }
              },
              "meta.visible": {
                "binding": {
                  "type": "property",
                  "config": {
                    "path": "view.params.showTicks"
                  }
                }
              }
            }
          },
          {
            "type": "ia.container.flex",
            "version": 0,
            "meta": {
              "name": "tick50"
            },
            "props": {
              "direction": "column",
              "alignItems": "center",
              "justify": "center",
              "style": {
                "classes": "vc/amount-tick",
                "width": "2px",
                "height": "6px",
                "backgroundColor": "#3f3f46",
                "borderRadius": "1px"
              }
            },
            "position": {
              "grow": 0,
              "shrink": 0,
              "basis": "2px"
            },
            "propConfig": {
              "props.style.backgroundColor": {
                "binding": {
                  "type": "expr",
                  "config": {
                    "expression": "if({view.custom.val} >= 50, \"#a1a1aa\", \"#3f3f46\")"
                  }
                }
              },
              "meta.visible": {
                "binding": {
                  "type": "property",
                  "config": {
                    "path": "view.params.showTicks"
                  }
                }
              }
            }
          },
          {
            "type": "ia.container.flex",
            "version": 0,
            "meta": {
              "name": "tick55"
            },
            "props": {
              "direction": "column",
              "alignItems": "center",
              "justify": "center",
              "style": {
                "classes": "vc/amount-tick",
                "width": "2px",
                "height": "6px",
                "backgroundColor": "#3f3f46",
                "borderRadius": "1px"
              }
            },
            "position": {
              "grow": 0,
              "shrink": 0,
              "basis": "2px"
            },
            "propConfig": {
              "props.style.backgroundColor": {
                "binding": {
                  "type": "expr",
                  "config": {
                    "expression": "if({view.custom.val} >= 55, \"#a1a1aa\", \"#3f3f46\")"
                  }
                }
              },
              "meta.visible": {
                "binding": {
                  "type": "property",
                  "config": {
                    "path": "view.params.showTicks"
                  }
                }
              }
            }
          },
          {
            "type": "ia.container.flex",
            "version": 0,
            "meta": {
              "name": "tick60"
            },
            "props": {
              "direction": "column",
              "alignItems": "center",
              "justify": "center",
              "style": {
                "classes": "vc/amount-tick",
                "width": "2px",
                "height": "6px",
                "backgroundColor": "#3f3f46",
                "borderRadius": "1px"
              }
            },
            "position": {
              "grow": 0,
              "shrink": 0,
              "basis": "2px"
            },
            "propConfig": {
              "props.style.backgroundColor": {
                "binding": {
                  "type": "expr",
                  "config": {
                    "expression": "if({view.custom.val} >= 60, \"#a1a1aa\", \"#3f3f46\")"
                  }
                }
              },
              "meta.visible": {
                "binding": {
                  "type": "property",
                  "config": {
                    "path": "view.params.showTicks"
                  }
                }
              }
            }
          }
        ]
      }
    ],
    "propConfig": {
      "props.style.opacity": {
        "binding": {
          "type": "expr",
          "config": {
            "expression": "if({view.params.disabled}, \"0.5\", \"1\")"
          }
        }
      }
    },
    "events": {
      "system": {
        "onStartup": {
          "type": "script",
          "scope": "G",
          "config": {
            "script": "try:\n\tself.view.custom.val = float(self.view.params.value)\nexcept:\n\tself.view.custom.val = 40\n"
          }
        }
      }
    }
  }
}


```

### com.inductiveautomation.perspective/views/Packs/AmountSlider/AmountSlider/resource.json

```json

{
  "scope": "G",
  "version": 1,
  "restricted": false,
  "overridable": true,
  "files": [
    "view.json"
  ]
}

```

### com.inductiveautomation.perspective/style-classes/vc/amount-track-wrap/style.json

```json

{
  "base": {
    "style": {
      "position": "relative",
      "display": "block",
      "width": "100%",
      "height": "28px",
      "overflow": "visible"
    },
    "mediaQueries": []
  },
  "variants": []
}


```

### com.inductiveautomation.perspective/style-classes/vc/amount-track-wrap/resource.json

```json

{
  "scope": "G",
  "version": 1,
  "restricted": false,
  "overridable": true,
  "files": [
    "style.json"
  ]
}

```

### com.inductiveautomation.perspective/style-classes/vc/amount-track/style.json

```json

{
  "base": {
    "style": {
      "backgroundColor": "#27272a",
      "borderRadius": "999px",
      "height": "8px",
      "pointerEvents": "none"
    },
    "mediaQueries": []
  },
  "variants": []
}


```

### com.inductiveautomation.perspective/style-classes/vc/amount-track/resource.json

```json

{
  "scope": "G",
  "version": 1,
  "restricted": false,
  "overridable": true,
  "files": [
    "style.json"
  ]
}

```

### com.inductiveautomation.perspective/style-classes/vc/amount-fill/style.json

```json

{
  "base": {
    "style": {
      "backgroundColor": "#fafafa",
      "borderRadius": "999px",
      "height": "8px",
      "pointerEvents": "none"
    },
    "mediaQueries": []
  },
  "variants": []
}


```

### com.inductiveautomation.perspective/style-classes/vc/amount-fill/resource.json

```json

{
  "scope": "G",
  "version": 1,
  "restricted": false,
  "overridable": true,
  "files": [
    "style.json"
  ]
}

```

### com.inductiveautomation.perspective/style-classes/vc/amount-thumb/style.json

```json

{
  "base": {
    "style": {
      "backgroundColor": "#fafafa",
      "borderRadius": "999px",
      "borderColor": "#18181b",
      "borderWidth": "2px",
      "borderStyle": "solid",
      "pointerEvents": "none"
    },
    "mediaQueries": []
  },
  "variants": []
}


```

### com.inductiveautomation.perspective/style-classes/vc/amount-thumb/resource.json

```json

{
  "scope": "G",
  "version": 1,
  "restricted": false,
  "overridable": true,
  "files": [
    "style.json"
  ]
}

```

### com.inductiveautomation.perspective/style-classes/vc/amount-slider-hit/style.json

```json

{
  "base": {
    "style": {
      "opacity": "0",
      "margin": "0",
      "width": "100%",
      "height": "100%",
      "position": "relative"
    },
    "mediaQueries": []
  },
  "variants": []
}


```

### com.inductiveautomation.perspective/style-classes/vc/amount-slider-hit/resource.json

```json

{
  "scope": "G",
  "version": 1,
  "restricted": false,
  "overridable": true,
  "files": [
    "style.json"
  ]
}

```

### com.inductiveautomation.perspective/style-classes/vc/amount-tick/style.json

```json

{
  "base": {
    "style": {
      "backgroundColor": "#3f3f46",
      "width": "2px",
      "height": "6px"
    },
    "mediaQueries": []
  },
  "variants": []
}


```

### com.inductiveautomation.perspective/style-classes/vc/amount-tick/resource.json

```json

{
  "scope": "G",
  "version": 1,
  "restricted": false,
  "overridable": true,
  "files": [
    "style.json"
  ]
}

```