tiddlywiki 5.1.21 → 5.2.1

package/editions/tw5.com/tiddlers/widgets/KeyboardWidget.tid

@@ -1,7 +1,7 @@
 caption: keyboard
 created: 20140302192136805
-modified: 20161003114634019
-tags: Widgets
+modified: 20211009121239821
+tags: Widgets TriggeringWidgets
 title: KeyboardWidget
 type: text/vnd.tiddlywiki
 
@@ -14,17 +14,36 @@ The keyboard widget allows ActionWidgets to be triggered by specific key combina
 The content of the `<$keyboard>` widget is rendered normally. The keyboard shortcuts only take effect when the focus is within the contained content.
 
 |!Attribute |!Description |
-|actions |A string containing ActionWidgets to be triggered when the key combination is detected |
+|actions |A string containing ActionWidgets to be triggered when the key combination is detected<br><<.from-version "5.2.0">> The variables: ''event-key'', ''event-code'' and ''modifier'' are available for the actions |
 |message |The title of the [[WidgetMessage|Messages]] to generate |
 |param |The parameter to be passed with the [[WidgetMessage|Messages]] |
 |key |Key string identifying the key(s) to be trapped (see below) |
 |class |A CSS class to be assigned to the generated HTML DIV element |
 |tag|<<.from-version "5.1.14">> The html element the widget creates to capture the keyboard event, defaults to:<br>» `span` when parsed in inline-mode<br>» `div` when parsed in block-mode|
 
+! Variables
+
+<<.from-version "5.2.0">> The following variables are made available to the actions:
+
+|!Variables |!Description |
+|`event-key` |The <<.var event-key>> variable contains the character, if possible. eg: `1`. You can experiment with some settings at: [[Key Codes (Example)]] |
+|`event-code` |The <<.var event-code>> variable contains a character description. eg:  `Digit1` instead of `1`. Or `Space` instead of an empty string ` `, which is hard to see|
+|`event-key-descriptor` |The <<.var event-key-descriptor>> variable is available if the keyboard event captured was configured using a [[keyboard shortcut descriptor|Keyboard Shortcut Descriptor]] of the form `((my-shortcut))` which references a configuration tiddler. |
+|`modifier` |The [[modifier Variable]] contains the Modifier Key held during the event (can be <kbd>normal</kbd>, <kbd>ctrl</kbd>, <kbd>shift</kbd>, <kbd>alt</kbd> or combinations thereof) |
+
 ! Key Strings
 
 Key strings are made up of one or more key specifiers separated by spaces. Each key specifier is zero or more of the modifiers <kbd>alt</kbd>, <kbd>shift</kbd>, <kbd>ctrl</kbd> or <kbd>meta</kbd> followed by the name of a key, all joined with "+" plus or "-" minus symbols. Key names are either the letter or digit printed on the key (eg "a" or "1"), or one of the special keys <kbd>backspace</kbd>, <kbd>tab</kbd>, <kbd>enter</kbd> or <kbd>escape</kbd>.
 
+<$railroad text="""
+[: {
+   ("alt" | "shift" | "ctrl" |: "meta" ) +("+" | "-") 
+	 }
+	 "+" 
+]
+( "<a-z,0-9>" | "backspace" |: "tab" | "enter" | "escape" )
+"""/>
+
 For example:
 
 ```
@@ -34,3 +53,7 @@ shift+escape
 ctrl+enter
 ctrl+shift+alt+A
 ```
+
+! More Info
+
+<<list-links "[tag[KeyboardWidget]]">>

package/editions/tw5.com/tiddlers/widgets/LetWidget.tid

@@ -0,0 +1,57 @@
+title: LetWidget
+created: 20211028115900000
+tags: Widgets
+caption: let
+
+! Introduction
+
+<<.from-version "5.2.1">> The <<.wid let>> widget allows multiple variables to be set in one operation. In some situations it can result in simpler code than using the more flexible <<.wlink SetWidget>> widget. It differs from the <<.wlink VarsWidget>> widget in that variables you're defining may depend on earlier variables defined within the same <<.wid let>>.
+
+! Content and Attributes
+
+The content of the <<.wid let>> widget is the scope for the value assigned to the variable.
+
+|!Attribute |!Description |
+|//{attributes not starting with $}// |Each attribute name specifies a variable name. The attribute value is assigned to the variable |
+
+Attributes are evaluated in the order they are written. Attributes with the same name are allowed. Each time a duplicate attribute is encountered, it will replace the existing value set by the earlier duplicate.
+
+! Examples
+
+Consider a case where you need to set multiple variables, where some depend on the evaluation of others.
+
+Using the <<.wid let>> widget, this situation may be handled in the following way:
+
+```
+\define helloworld() Hello world!
+
+<$let target="MyTiddler" currentTiddler={{{ [<target>prefix[$:/settings/for/]] }}} settings={{!!text}} currentTiddler=<<target>> >
+  The settings for <<currentTiddler>> are: <<settings>>
+</$let>
+```
+
+In contrast, here is the same example using the <<.wid set>> widget:
+
+```
+<$set name="target" value="MyTiddler" >
+<$set name="currentTiddler" value={{{ [<target>prefix[$:/settings/for/]] }}} >
+<$set name="settings" value={{!!text}} >
+<$set name="currentTiddler" value=<<target>> >
+  The settings for <<currentTiddler>> are: <<settings>>
+</$set>
+</$set>
+</$set>
+</$set>
+```
+
+! Remarks
+
+This widget differs from <<.wid vars>> in the following way:
+
+* Each variable's definition will be immediately available to all proceeding variables in the same let widget. This differs from vars, in which definitions which depend on some variable will always look to the widget's outer scope for a value.
+
+This widget differs from <<.wid set>> in the following ways:
+
+* A fallback (also known as "emptyValue") cannot be specified
+* Filters cannot be used to produce a conditional variable assignment
+* Variable names must be literal strings

package/editions/tw5.com/tiddlers/widgets/LinkCatcherWidget.tid

@@ -1,7 +1,7 @@
 caption: linkcatcher
 created: 20131024141900000
-modified: 20170707111536556
-tags: Widgets
+modified: 20211009122821108
+tags: Widgets MessageHandlerWidgets TriggeringWidgets
 title: LinkCatcherWidget
 type: text/vnd.tiddlywiki
 
@@ -23,5 +23,5 @@ The content of the `<$linkcatcher>` widget is displayed normally.
 |message |Optional identifier for a [[widget message|Messages]] to be sent when a navigation is caught  |
 |set |Optional title of the tiddler to be set to a specified value when navigation occurs |
 |setTo |Value to be assigned by the `set` attribute |
-|actions |Actions to be performed when a link is caught. Within the action string, the variable "navigateTo" contains the title of the tiddler being navigated |
+|actions |Actions to be performed when a link is caught. Within the action string, the variable "navigateTo" contains the title of the tiddler being navigated. <<.from-version "5.1.23">> the <<.def "modifier">> variable lists the modifier keys that are pressed when the action is invoked. The possible modifiers are ''ctrl'', ''ctrl-alt'', ''ctrl-shift'', ''alt'', ''alt-shift'', ''shift'' and ''ctrl-alt-shift'' |
 

package/editions/tw5.com/tiddlers/widgets/LinkWidget.tid

@@ -9,9 +9,10 @@ The `link` widget generates links to tiddlers. (Use the HTML `<a>` element to ge
 
 ! Content and Attributes
 
-The content of the link widget is rendered within the `<a>` tag representing the link. If the content is empty then the title of the target tiddler is rendered as the default.
+The content of the link widget is rendered within the `<a>` tag representing the link. If the content is empty then the title of the target tiddler is rendered as the default, for example:
 
-For example, `<$link to="HelloThere"/>` is equivalent to `<$link to="HelloThere">HelloThere</$link>` and `<$link/>` is equivalent to `<$link to=<<currentTiddler>>><$view field="title"/></$link>`.
+* `<$link/>` is equivalent to `<$link to=<<currentTiddler>>><$view field="title"/></$link>`
+* `<$link to="HelloThere"/>` is equivalent to `<$link to="HelloThere">HelloThere</$link>`
 
 |!Attribute |!Description |
 |to |The title of the target tiddler for the link (defaults to the [[current tiddler|Current Tiddler]]) |
@@ -32,6 +33,8 @@ This means that you can control the text of a link tooltip in several ways:
 ```
 <$link to="HelloThere" tooltip="Custom tooltip">Link 1</$link>
 
+<$link to="HelloThere" tooltip="Another tooltip">{{$:/core/icon}}</$link>
+
 <$set name="tv-wikilink-tooltip" value="I'm a link to {{!!title}}">
 <$link to="HelloThere">Link 2</$link>
 </$set>
@@ -42,6 +45,8 @@ Renders as:
 
 <$link to="HelloThere" tooltip="Custom tooltip">Link 1</$link>
 
+<$link to="HelloThere" tooltip="Another tooltip">{{$:/core/icon}}</$link>
+
 <$set name="tv-wikilink-tooltip" value="I'm a link to {{!!title}}">
 <$link to="HelloThere">Link 2</$link>
 </$set>

package/editions/tw5.com/tiddlers/widgets/ListWidget.tid

@@ -1,6 +1,6 @@
 caption: list
 created: 20131024141900000
-modified: 20190608162410684
+modified: 20210416175333981
 tags: Widgets Lists
 title: ListWidget
 type: text/vnd.tiddlywiki
@@ -82,10 +82,43 @@ The action of the list widget depends on the results of the filter combined with
 |template |The title of a template tiddler for transcluding each tiddler in the list. When no template is specified, the body of the ListWidget serves as the item template. With no body, a simple link to the tiddler is returned. |
 |editTemplate |An alternative template to use for [[DraftTiddlers|DraftMechanism]] in edit mode |
 |variable |The name for a [[variable|Variables]] in which the title of each listed tiddler is stored. Defaults to ''currentTiddler'' |
+|counter |<<.from-version "5.2.0">> Optional name for a [[variable|Variables]] in which the 1-based numeric index of each listed tiddler is stored (see below) |
 |emptyMessage |Message to be displayed when the list is empty |
 |storyview |Optional name of module responsible for animating/processing the list |
 |history |The title of the tiddler containing the navigation history |
 
+!! `counter` attribute
+
+The optional `counter` attribute specifies the name of a variable to hold the 1-based numeric index of the current item in the list.
+
+Two additional variables are also set to indicate the first and last items in the list:
+
+* `<counter-variable-name>-first` is set to `yes` for the first entry in the list, `no` for the others
+* `<counter-variable-name>-last` is set to `yes` for the last entry in the list, `no` for the others
+
+For example:
+
+
+```
+<$list filter="[tag[About]sort[title]]" counter="counter">
+<div>
+<<counter>>: ''<$text text=<<currentTiddler>>/>'' (is first: <<counter-first>>, is last: <<counter-last>>)
+</div>
+</$list>
+```
+
+Displays as:
+
+<<<
+<$list filter="[tag[About]sort[title]]" counter="counter">
+<div>
+<<counter>>: ''<$text text=<<currentTiddler>>/>'' (is first: <<counter-first>>, is last: <<counter-last>>)
+</div>
+</$list>
+<<<
+
+Note that using the `counter` attribute can degrade the performance of the list widget in certain circumstances. In particular, it prevents an optimisation that normally occurs when dynamically adding or removing entries.
+
 !! Edit mode
 
 The `<$list>` widget can optionally render draft tiddlers through a different template to handle editing, see DraftMechanism.

package/editions/tw5.com/tiddlers/widgets/ListopsData.tid

@@ -3,5 +3,6 @@ daysoftheweek: four three Fri Thu Wed Tue Mon
 modified: 20151108041839747
 title: ListopsData
 type: application/x-tiddler-dictionary
+tags: [[Operator Examples]]
 
 DataIndex: 

package/editions/tw5.com/tiddlers/widgets/LogWidget.tid

@@ -0,0 +1,45 @@
+created: 20201120152706842
+modified: 20201120154927696
+tags: Widgets [[Debugging Widgets]]
+title: LogWidget
+type: text/vnd.tiddlywiki
+
+! Introduction
+
+<<.from-version "5.1.23">> The ''log'' widget can be used to output debugging information to the [[JavaScript console|Web Developer Tools]] supported by most browsers. 
+
+<<.tip """ For use with ActionWidgets see [[ActionLogWidget]] which uses identical parameters""">>
+
+! Content and Attributes
+
+The ''log'' widget is invisible. Any content within it is ignored. Note that the widget will log to the console both when it is first rendered and also every time it refreshes.
+
+When the widget is rendered, the names and values of all attributes are logged to the JavaScript console.
+In addition there are optional attributes that can be used:
+
+|!Optional Attribute |!Description |
+|$$filter|All variables matching this filter will also be logged. |
+|$$message |A message to display as the title of the information logged. Useful when several `log` widgets are used in sequence. |
+|$$all |Set to "yes" to log all variables in a collapsed table. Note that if there is nothing specified to log, all variables are always logged instead.|
+
+
+! Example
+
+Here is an example of logging two variables:
+
+```
+<$log myVar=<<myVar>> otherVar=<<otherVar>>/>
+```
+
+To log all variables:
+
+```
+<$log />
+```
+
+
+To log two variables as well as all core variables (which start with `tv-`):
+
+```
+<$log myVar=<<myVar>> other={{!!status}} $$filter="[prefix[tv-]]"/>
+```

package/editions/tw5.com/tiddlers/widgets/MacroCallWidget.tid

@@ -1,23 +1,37 @@
-title: MacroCallWidget
-created: 201310241419
-modified: 201310300837
-tags: Widgets
 caption: macrocall
+created: 20131024141900000
+modified: 20200928102843275
+tags: Widgets
+title: MacroCallWidget
+type: text/vnd.tiddlywiki
 
 ! Introduction
 
-The macro call widget provides an alternative syntax for invoking macros. The advantage of the widget form is that it allows macro parameters to be specified as widget attributes, thus allowing indirection and macro values to be set.
+The macro call widget provides a more flexible alternative syntax for invoking macros compared to the usual `<<macroname>>` syntax documented in [[Macros in WikiText]].
 
-For example, a macro called `italicise` that takes a single parameter called `text` can be invoked in any of these ways:
+For example, a macro called `italicise` that takes a single parameter called `text` would usually be invoked like this:
 
 ```
 <<italicise "Text to be made into italics">>
 <<italicise text:"Text to be made into italics">>
+```
+
+The same macro can be invoked using the macro call widget like this:
+
+```
 <$macrocall $name="italicise" text="Text to be made into italics"/>
 <$macrocall $name="italicise" text={{Title of tiddler containing text to be italicised}}/>
 <$macrocall $name="italicise" text=<<textMaker "Another macro to generate the text to be italicised">>/>
 ```
 
+The advantages of the widget formulation are:
+
+* Macro parameters are specified as widget attributes, thus allowing indirection via `{{title!!field}}`, `<<macroname>>` or `{{{filter}}}`
+* The output format can be chosen from several options:
+** `text/html` wikifies the result of the macro
+** `text/plain` wikifies the result of the macro and then extracts the plain text characters (ie. ignoring HTML tags)
+** <<.from-version "5.1.23">> `text/raw` returns the result of the macro, without wikification
+
 You can see several examples of the macro call widget within the core:
 
 * Listing module information: [[$:/snippets/modules]]
@@ -31,5 +45,5 @@ The content of the `<$macrocall>` widget is ignored.
 |!Attribute |!Description |
 |$name |Name of the macro to invoke |
 |$type |ContentType with which the macro text should be parsed (defaults to `text/vnd.tiddlywiki`) |
-|$output |ContentType for the output rendering (defaults to `text/html`, can also be `text/plain`) |
+|$output |ContentType for the output rendering (defaults to `text/html`, can also be `text/plain` or `text/raw`) |
 |//parameters// |Macro parameters specified as attributes |

package/editions/tw5.com/tiddlers/widgets/MessageCatcherWidget.tid

@@ -0,0 +1,46 @@
+created: 20210309133636211
+modified: 20211009122821123
+tags: Widgets MessageHandlerWidgets TriggeringWidgets
+title: MessageCatcherWidget
+type: text/vnd.tiddlywiki
+
+! Introduction
+
+<<.from-version "5.2.0">>
+
+The message catcher widget traps [[messages|Messages]] dispatched within its child content, and allows invoking a series of ActionWidgets in response to those messages.
+
+! Content and Attributes
+
+The content of the `<$messagecatcher>` widget is displayed normally.
+
+|!Attribute |!Description |
+|//{any attributes starting with $}// |Each attribute name (excluding the $) specifies the name of a message, and the value specifies the action string to be invoked |
+|type |Name of the message be trapped, for example "tm-scroll" or "tm-navigate". The `type` and `actions` attributes can be useful when the type of event needs to be specified via a variable or text reference |
+|actions |Action string to be invoked when a matching message is trapped. Must be used in conjunction with the `type` attribute |
+
+! Variables
+
+The message catcher widget sets the following variables within each action string:
+
+|!Variables |!Description |
+|`event-*` |All string-based properties of the `event` object, with the names prefixed with `event-` |
+|`list-event` |A list of the names of each the string-based properties of the `event` object (the names are not prefixed with `event-`) |
+|`event-paramObject-*` |All string-based properties of the `event.paramObject` object, with the names prefixed with `event-paramObject-` |
+|`list-event-paramObject` |A list of the names of each the string-based properties of the `event.paramObject` object (the names are not prefixed with `event-paramObject-`) |
+|`modifier` |For messages that originated with browser events, the modifier keys that were pressed when the event was fired. The possible modifiers are ''normal'' (no modifiers), ''ctrl'', ''ctrl-alt'', ''ctrl-shift'', ''alt'', ''alt-shift'', ''shift'' and ''ctrl-alt-shift'' |
+
+! Example
+
+<$macrocall $name="wikitext-example-without-html" src="""
+\define actions()
+<$action-log/>
+\end
+
+<$messagecatcher type="tm-navigate" actions=<<actions>>>
+
+Click on [[this link]] to fire an action. See the browser JavaScript console for the output
+
+</$messagecatcher>
+"""/>
+

package/editions/tw5.com/tiddlers/widgets/MessageHandlerWidgets.tid

@@ -0,0 +1,13 @@
+created: 20211031174746965
+modified: 20211113163856255
+tags: Widgets
+title: MessageHandlerWidgets
+type: text/vnd.tiddlywiki
+
+Message handler widgets are those widgets which can react to one or more [[widget messages|Messages]].
+
+<<.tip "Widget messages are similar to low-level DOM events, except they are higher-level and specific to TiddlyWiki. To handle DOM events see the EventCatcherWidget">>
+
+The following message handler widgets are provided:
+
+<<list-links "[tag[MessageHandlerWidgets]]">>

package/editions/tw5.com/tiddlers/widgets/NavigatorWidget.tid

@@ -1,7 +1,7 @@
 caption: navigator
 created: 20131024141900000
-modified: 20170629074415261
-tags: Widgets
+modified: 20211127023932158
+tags: Widgets MessageHandlerWidgets
 title: NavigatorWidget
 type: text/vnd.tiddlywiki
 
@@ -18,6 +18,7 @@ The navigator widget displays any contained content, and responds to Messages di
 |history |Name of the tiddler containing the history list to be manipulated |
 |openLinkFromInsideRiver |Determines the location for opening new tiddlers from links within the story river: at the ''top'' or ''bottom'' of the story river, or ''above'' or ''below'' the current tiddler |
 |openLinkFromOutsideRiver|Determines the location for opening new tiddlers from linkes outside the story river: at the ''top'' or ''bottom'' of the story river|
+|relinkOnRename|<<.from-version "5.1.14">> Determines if tags in other tiddlers are renamed if the tiddler title changes. ''yes'' or ''no''. default: ''no''|
 
 ! Widget Messages
 
@@ -26,9 +27,7 @@ The following [[Messages]] are handled by the navigator widget:
 <ul>
 <$list filter="[tag[navigator-message]]">
 <li>
-<$link to={{!!title}}>
-<$view field="title"/>
-</$link>
+<$link/>
 </li>
 </$list>
 </ul>
@@ -40,3 +39,6 @@ The following [[Variables]] are assigned by the navigator widget:
 * <<.vlink tv-story-list>>, giving the name of the tiddler containing the story list
 * <<.vlink tv-history-list>>, giving the name of the tiddler containing the history list
 
+! Examples
+
+See [[Creating SubStories]].

package/editions/tw5.com/tiddlers/widgets/RadioWidget Example.tid

@@ -0,0 +1,35 @@
+created: 20201130181015815
+modified: 20210307102027763
+tags: RadioWidget
+title: RadioWidget Example
+type: text/vnd.tiddlywiki
+
+\define newText() value: $(actionValue)$
+
+\define radioActions()
+<$action-sendmessage $message="tm-notify" $param="RadioWidget ExampleTemplate" value=<<actionValue>> current=<<currentTiddler>> />
+<$action-createtiddler $basetitle="$:/temp/test/value" $overwrite="yes" text=<<newText>>/>
+<$action-navigate $to="$:/temp/test/value"/>
+\end
+
+!! Using Actions
+
+When you select an option below the following acitons will occur:
+
+* the value is written to $:/temp/test/value
+* the ''id'' field of tiddler: $:/temp/test will be updated
+* a notification showing the ''actionValue'' will be shown
+
+<$tiddler tiddler="$:/temp/test">
+
+<$radio field="id" value="a" actions=<<radioActions>> > Option a </$radio>
+
+<$radio field="id" value="b" actions=<<radioActions>> > Option b </$radio>
+
+<$radio field="id" value="c" actions=<<radioActions>> > Option c </$radio>
+
+</$tiddler>
+
+The wikitext of this example is shown below:
+
+<$codeblock code={{RadioWidget Example!!text}}/>

package/editions/tw5.com/tiddlers/widgets/RadioWidget ExampleTemplate.tid

@@ -0,0 +1,7 @@
+created: 20201130181111808
+modified: 20201130182421491
+tags: RadioWidget
+title: RadioWidget ExampleTemplate
+type: text/vnd.tiddlywiki
+
+value = <<value>>

package/editions/tw5.com/tiddlers/widgets/RadioWidget.tid

@@ -1,7 +1,7 @@
 caption: radio
 created: 20131212195353929
-modified: 20170115095809695
-tags: Widgets
+modified: 20211009121654734
+tags: Widgets TriggeringWidgets
 title: RadioWidget
 type: text/vnd.tiddlywiki
 
@@ -15,10 +15,13 @@ The content of the `<$radio>` widget is displayed within an HTML `<label>` eleme
 
 |!Attribute |!Description |
 |tiddler |Title of the tiddler to manipulate (defaults to the [[current tiddler|Current Tiddler]]) |
-|field |The field of the //tiddler// bound to the radio button|
-|index|<<.from-version "5.1.14">> The index of the //tiddler// being [[DataTiddler|DataTiddlers]] bound to the radio button<<.tip "takes precedence over //field//">>|
-|value |The value for the //field// or //index// of the //tiddler//|
-|class |The CSS classes assigned to the label around the radio button<$macrocall $name=".tip" _="""<<.from-version "5.1.14">> `tc-radio` is always applied by default, as well as `tc-radio-selected` when selected"""/>|
+|field |The field of the //tiddler// bound to the radio button |
+|index|<<.from-version "5.1.14">> The index of the //tiddler// being [[DataTiddler|DataTiddlers]] bound to the radio button (takes precedence over //field//) |
+|default |<<.from-version "5.2.0">> The default value to be used for matching if the tiddler, field or index are missing |
+|value |The value for the //field// or //index// of the //tiddler// |
+|class |The CSS classes assigned to the label around the radio button <<.from-version "5.1.14">> `tc-radio` is always applied by default, as well as `tc-radio-selected` when selected |
+|actions|<<.from-version "5.1.23">> Optional string containing ActionWidgets to be triggered when the value changes. <br>The variable: ''actionValue'' is available for the actions  |
+|disabled|<<.from-version "5.1.23">> Optional. Set to "yes" to disable the radio input. Defaults to "no" |
 
 !! Field Mode
 
@@ -37,3 +40,5 @@ This example sets the `Tree Frog` index in the tiddler AnimalColours:
 <$radio index="Tree Frog" value="green"> green</$radio>
 <$radio index="Tree Frog" value="brown"> brown</$radio>
 </$tiddler>"""/>
+
+{{RadioWidget Example}}

package/editions/tw5.com/tiddlers/widgets/RangeWidget Example.tid

@@ -0,0 +1,53 @@
+created: 20201130191618831
+modified: 20210307102027763
+tags: RangeWidget
+title: RangeWidget Example
+type: text/vnd.tiddlywiki
+
+\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}}/>

package/editions/tw5.com/tiddlers/widgets/RangeWidget.tid

@@ -1,13 +1,13 @@
 caption: range
 created: 20171102134825376
-modified: 20180425132848231
-tags: Widgets
+modified: 20211009121606405
+tags: Widgets TriggeringWidgets
 title: RangeWidget
 type: text/vnd.tiddlywiki
 
 ! Introduction
 
-The range widget displays an HTML `<input type="range">` that reflects a given tiddler field numeric value. Adjusting the radio button sets the tiddler field to the value.
+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
 
@@ -15,12 +15,17 @@ The content of the `<$range>` widget is ignored.
 
 |!Attribute |!Description |
 |tiddler |Title of the tiddler to manipulate (defaults to the [[current tiddler|Current Tiddler]]) |
-|field |The field of the //tiddler// bound to the radio button|
-|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 |The default value displayed if the field is missing or empty.|
-|class |CSS classes to be assigned to the label around the radio button |
+|field |The field of the //tiddler// bound to the range slider|
+|index|<<.from-version "5.1.22">> The index of the //tiddler//, a [[DataTiddler|DataTiddlers]], 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|<<.from-version "5.1.23">> Optional, A string containing ActionWidgets to be triggered when the value changes. <br>The variable: ''actionValue'' is available for ''all'' actions.<br>The variable: ''actionValueHasChanged'' is always `yes` here.|
+|actionsStart|<<.from-version "5.1.23">> Optional, A string containing ~ActionWidgets to be triggered when the "handle" is ''clicked''. <br>The variable: ''actionValueHasChanged'' is always `no` here|
+|actionsStop|<<.from-version "5.1.23">> Optional, A string containing ~ActionWidgets to be triggered when the "handle" is ''released''. <br>The variable: ''actionValueHasChanged'' is `yes`, ''if'' the new-value is different to the start-value |
+|disabled|<<.from-version "5.1.23">> Optional, disables the range input if set to "yes". Defaults to "no"|
 
 ! Examples
 
@@ -34,3 +39,5 @@ src="""<$range tiddler="$:/_RangeDemo/1" min="-1" max="10" default="1" increment
 <$macrocall $name='wikitext-example-without-html'
 src="""<$range tiddler="$:/_RangeDemo/2" min="0" max="1" default=".01" increment=".01"/> {{$:/_RangeDemo/2}}"""/>
 
+
+{{RangeWidget Example}}