Scroll Cursor
Qubes 5.6 Used to input a value across a range by means of an interactive cursor.
Properties
| Property | Description |
| Enabled | Boolean indicating whether or not the component is enabled. |
| Hint | Specifies the user hint string that will appear in the component's interactive help bubble. |
| Interactive | Indicates whether or not the value is updated in real time (False by default). |
| TabIndex | Integer indicating the component's tab order (Qubes 5.6). |
| ValueInitial | Determines the component's initial value when the screen opens and each time it is reset (see Reset Button). |
| ValueMax | Maximum cursor value (100 by default). |
| ValueMin | Minimum cursor value (0 by default). |
| ValueStep | Value of a cursor step (1 by default). |
| Visible | Boolean indicating whether or not the component will be visible. |
Value
The value of a cursor is that of its position, between ValueMin and ValueMax, at every ValueStep.
Remarks
If Interactive is set to True, the value will be updated interactively, while the user moves the cursor, so the updates can take place at a high speed. This mode should be limited to simple cases.
When Interactive is set to False (the default mode), the value is updated when the user "releases" the cursor, so the updates are not in real time. This mode may be more appropriate for complex use cases.
The rendering in design mode is a placeholder.
Starting from Qubes 10.0, you can use an ornament to customize the component.
For example, by using this inside a ThemePack:
{
"name": "custom-scroll-cursor",
"css": ".ornament-class .xfm-slider { background-image: linear-gradient(#09D1B8, #09D1B8); height: 12px; border: unset; }
.ornament-class .xfm-slider::-webkit-slider-thumb {background: #F49625; height: 20px; width: 20px;border-radius: 50%;}
.ornament-class .xfm-slider::-moz-range-thumb {background: #F49625; height: 20px; width: 20px;border-radius: 50%;}"
}
You will obtain this result:
The CSS of ".ornament-class .xfm-slider" modifies the appearance of the scroll bar and the CSS of ".ornament-class .xfm-slider::" modifies the appearance of the cursor.
The background-image property allows to fill the left part of the scroll bar dynamically (depending of Interactive's value).
Please note that "::-webkit-slider-thumb" is required for navigators that use WebKit (Chrome, Safari, Chromium based Edge, Opera...) and "::-moz-range-thumb" is required for Firefox. By duplicating the CSS for each, it allows to have the same result on most of the navigators.
You can also use this ornament to make it vertical:
{
"name": "custom-scroll-cursor-vertical",
"css": ".ornament-class .xfm-slider { transform: rotate(-90deg); } "
}