mirror of
https://github.com/noodlapp/noodl-docs.git
synced 2026-01-11 23:02:54 +01:00
656e5fc8d2
* chore: Upgrade Docusaurus from v2 to v3 * chore: Update "Test build" GH workflow * fix: build All markdown is processed as MDX * fix: Broken links
90 lines
4.5 KiB
Markdown
90 lines
4.5 KiB
Markdown
---
|
|
hide_title: true
|
|
hide_table_of_contents: true
|
|
title: Slider node
|
|
---
|
|
|
|
{/*##head##*/}
|
|
|
|
# Slider
|
|
|
|
This node places a range slider in the visual tree. It is used to select a <span className="ndl-data">number</span> between a `min` and a `max` value.
|
|
|
|
<div className="ndl-image-with-background l">
|
|
|
|
|
|
|
|
</div>
|
|
|
|
The <span className="ndl-node">Slider</span> node allows you to set a <span className="ndl-data">Step</span> value. This controls in what intervals the slider can be incremented or decremented.
|
|
|
|
<div className="ndl-image-with-background l">
|
|
|
|
|
|
|
|
</div>
|
|
|
|
{/*##head##*/}
|
|
|
|
## Inputs
|
|
|
|
| Data | Description |
|
|
| --------------------------------------- | --------------------------------------------------------------------------------------------------------------------- |
|
|
| <span className="ndl-data">Value</span> | Sets the numeric value of the control. |
|
|
| <span className="ndl-data">Min</span> | Sets the numeric minumum value that can be selected using this range control. Default is 0. |
|
|
| <span className="ndl-data">Max</span> | Sets the numeric maximum value that can be selected using this range control. Default is 100. |
|
|
| <span className="ndl-data">Step</span> | Sets the numeric step value for this range control. Values can only be selected in the specified steps. Default is 1. |
|
|
|
|
It can be enabled and disabled using the <span className="ndl-data">Enabled</span> input:
|
|
|
|
@include "../../shared-props/inputs/_enabled.md"
|
|
|
|
### Thumb and track
|
|
|
|
The Property Panel features editing popouts for the Slider Thumb and Track. These are styled separately using modified versions of the [Dimensions](/nodes/shared-props/inputs/visual-input-properties/#dimensions), [Border Style](/nodes/shared-props/inputs/visual-input-properties/#border-style), [Corner Radius](/nodes/shared-props/inputs/visual-input-properties/#corner-radius) and [Box Shadow](/nodes/shared-props/inputs/visual-input-properties/#box-shadow) gadgets.
|
|
|
|
### Visual
|
|
|
|
This node supports the following [Visual Input Properties](/nodes/shared-props/inputs/visual-input-properties/):
|
|
|
|
- [Margin](/nodes/shared-props/inputs/visual-input-properties/#margin)
|
|
- [Padding](/nodes/shared-props/inputs/visual-input-properties/#padding)
|
|
- [Alignment](/nodes/shared-props/inputs/visual-input-properties/#alignment)
|
|
- [Dimensions](/nodes/shared-props/inputs/visual-input-properties/#dimensions)
|
|
- [Layout, Position](/nodes/shared-props/inputs/visual-input-properties/#-position)
|
|
- [Style](/nodes/shared-props/inputs/visual-input-properties/#style)
|
|
- [Placement](/nodes/shared-props/inputs/visual-input-properties/#placement)
|
|
- [Other](/nodes/shared-props/inputs/visual-input-properties/#other)
|
|
- [Advanced HTML](/nodes/shared-props/inputs/visual-input-properties/#advanced-html)
|
|
|
|
## Outputs
|
|
|
|
| Data | Description |
|
|
| ----------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------- |
|
|
| <span className="ndl-data">Value</span> | The current selected numeric value of the range control. |
|
|
| <span className="ndl-data">Value Percent</span> | The current selected numeric value of the range control adjusted to be between `0` and `100`, so the value of the range control in `%`. |
|
|
|
|
@include "../../shared-props/outputs/_control-events.md"
|
|
|
|
### States
|
|
|
|
The Slider
|
|
|
|
@include "../../shared-props/outputs/_control-states.md"
|
|
|
|
### Visual
|
|
|
|
This node supports the following [Visual Output Properties](/nodes/shared-props/outputs/visual-output-properties/):
|
|
|
|
- [Bounding Box](/nodes/shared-props/outputs/visual-output-properties/#bounding-box)
|
|
- [Mounted](/nodes/shared-props/outputs/visual-output-properties/#mounted)
|
|
- [Other](/nodes/shared-props/outputs/visual-output-properties/#other)
|
|
|
|
<div className="hidden-props-for-editor">
|
|
|
|
@include "../../shared-props/inputs/_visual-input-properties.md"
|
|
|
|
@include "../../shared-props/outputs/_visual-output-properties.md"
|
|
|
|
</div>
|