Custom Slider

The Custom Slider control is an interactive widget that allows users to visually adjust a value by sliding a thumb control along a track. It can be connected to a variable (e.g., via CODESYS, MQTT, etc.) to influence system parameters in real time.

Overview

The Custom Slider provides an intuitive way to change numeric values directly from the interface. With support for real-time variable binding, users can adjust parameters like speed, brightness, or temperature with precision and immediate effect.

Key Features

Variable Binding

Connects to live data sources (e.g., CODESYS, MQTT).
Sends updated values as the user interacts with the slider.

Interactive Thumb Control

Drag the slider thumb to adjust the value.
Snap-to-value functionality ensures consistent increments (optional).

Live Value Display

Show the current value numerically beside or on the slider.
Include unit suffixes (e.g., %, °C, rpm) for better context.

Custom Range & Steps

Define minimum, maximum, and step values.
Allows fine-tuned control over the data range.

Custom Labels & Markers

Add labels or tick markers to provide visual reference points.
Helps users understand the scale and purpose of the slider.

Configurable Appearance

Customize colors, size, orientation (horizontal/vertical), and track styling.

Use Cases

Parameter Tuning

Example: Adjust motor speed or system gain in an automation interface.

Environmental Control

Example: Change temperature setpoints for HVAC systems.

User Preferences

Example: Set display brightness or sound volume interactively.

SVG ID Reference Table

Use the following SVG IDs to assign dynamic values to elements within the Custom Slider:

#	Element	SVG ID
1	Bar Fill	`barLFill`
2	Bar Path	`barPath`
3	Slider Thumb	`thumb`

Code Snippet Example

 <rect id="barPath" x="83" y="26" width="629" height="21" rx="10.5" ry="10.5" style="fill: #3c3e41"/>
  <rect id="barLFill" x="83" y="26" width="314" height="21" rx="10.5" ry="10.5" style="fill: #3c0ad9"/>
  <g id="thumb">
    <circle cx="301.5" cy="35" r="35" style="fill: #efefef; filter: url(#filter-8)"/>
    <circle cx="301.5" cy="35" r="35" style="fill: #3c3e41"/>
  </g>

Pages