This page is part of a static HTML representation of the TiddlyWiki at


4th November 2019 at 6:54pm


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.

tiddlerTitle of the tiddler to manipulate (defaults to the current tiddler)
fieldThe field of the tiddler bound to the range slider
index New in: 5.1.22 The index of the tiddler, a DataTiddler, to which the radio button is bound
be sure to set the tiddler correctly
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


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: