This page is part of a static HTML representation of the TiddlyWiki at https://tiddlywiki.com/

RangeWidget

 13th November 2023 at 9:33am

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.

AttributeDescription
tiddlerTitle of the tiddler to manipulate (defaults to the current tiddler)
fieldThe field of the tiddler bound to the range slider
indexIntroduced in v5.1.22 The index of the tiddler, a DataTiddler, to which the radio button is bound
minThe minimum value to be able to be set by the <$range> widget
maxThe maximum value to be able to be set by the <$range> widget
incrementThe minimum amount by which a value may be changed. Defaults to 1
defaultIf the field is missing or empty this is the default position for the widget handle relative to the min and max values
classCSS classes to be assigned to the label around the range slider
actionsIntroduced 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.
actionsStartIntroduced in v5.1.23 Optional, A string containing ActionWidgets to be triggered when the "handle" is clicked.
The variable: actionValueHasChanged is always no here
actionsStopIntroduced 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
disabledIntroduced 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}}/>