Introduction
The range widget displays an HTML <input type="range"> that reflects a given tiddler field numeric value. Adjusting the range slider sets the tiddler field to the value.
Content and Attributes
The content of the <$range> widget is ignored.
| Attribute | Description |
|---|---|
| tiddler | Title of the tiddler to manipulate (defaults to the current tiddler) |
| field | The field of the tiddler bound to the range slider |
| index | Introduced in v5.1.22 The index of the tiddler, a DataTiddler, to which the radio button is bound |
| min | The minimum value to be able to be set by the <$range> widget |
| max | The maximum value to be able to be set by the <$range> widget |
| increment | The minimum amount by which a value may be changed. Defaults to 1 |
| default | If the field is missing or empty this is the default position for the widget handle relative to the min and max values |
| class | CSS classes to be assigned to the label around the range slider |
| actions | Introduced in v5.1.23 Optional, A string containing ActionWidgets to be triggered when the value changes. The variable: actionValue is available for all actions. The variable: actionValueHasChanged is always yes here. |
| actionsStart | Introduced in v5.1.23 Optional, A string containing ActionWidgets to be triggered when the "handle" is clicked. The variable: actionValueHasChanged is always no here |
| actionsStop | Introduced in v5.1.23 Optional, A string containing ActionWidgets to be triggered when the "handle" is released. The variable: actionValueHasChanged is yes, if the new-value is different to the start-value |
| disabled | Introduced in v5.1.23 Optional, disables the range input if set to "yes". Defaults to "no" |
| data-* | New in v5.3.2 Optional data attributes to be assigned to the <input> HTML element |
| style.* | New in v5.3.2 Optional CSS properties to be assigned to the <input> HTML element |
Examples
Range -1 to 10
<$range tiddler="$:/_RangeDemo/1" min="-1" max="10" default="1" increment="1"/> {{$:/_RangeDemo/1}}That renders as:
Range 0 to 1
<$range tiddler="$:/_RangeDemo/2" min="0" max="1" default=".01" increment=".01"/> {{$:/_RangeDemo/2}}That renders as:
Using Actions
The wikitext of this example is shown below:
\define getText() $(text)$ - value: $(value)$ - changed: $(actionValueHasChanged)$
\define range-log(text:"", value:"", tiddler:"$:/temp/range/log")
<$vars text="""$text$""" value="""$value$""" >
<$action-setfield $tiddler="""$tiddler$""" $index=<<now "0hh-0mm-0ss:0XXX">> $value=<<getText>>/>
</$vars>
\end
\define clear-range-log(tiddler:"$:/temp/range/log")
<$action-setfield $tiddler="""$tiddler$""" text="{}" show=show/>
\end
\define logTiddler()$:/temp/range/log
\define clearLogButton()<$button actions=<<clear-range-log>>>Clear Log</$button>
\define actionsStop()
<$macrocall $name="range-log" text=" actionsStop" value=<<actionValue>> />
\end
\define actionsStart()
<$macrocall $name="range-log" text=" actionsStart" value=<<actionValue>> />
\end
\define actions()
<$macrocall $name="range-log" text="actions" value=<<actionValue>> />
\end
!! Using Actions
<$range tiddler="$:/temp/range/1__" min="-1" max="10" default="1" increment="1"
actionsStart=<<actionsStart>> actionsStop=<<actionsStop>> actions=<<actions>>/> {{$:/temp/range/1__}}
<$range tiddler="$:/temp/range/__2" min="0" max="1" default=".01" increment=".01"
actionsStart=<<actionsStart>> actionsStop=<<actionsStop>> actions=<<actions>> /> {{$:/temp/range/__2}}
<$checkbox tiddler=<<logTiddler>> field="show" checked="show" unchecked="hide"> Show log</$checkbox> <<clearLogButton>>
<$reveal stateTitle=<<logTiddler>> stateField="show" type="match" text="show">
<$transclude tiddler=<<logTiddler>> />
</$reveal>
---
The wikitext of this example is shown below:
<$codeblock code={{RangeWidget Example!!text}}/>