How to conditionally style a range widget when it has no data?

#1

I have a range widget like <$range field="value"/> that is transcluded into multiple tiddlers via a ViewTemplate. I would love to have a visual indicator when the widget currently has no data associated with it (i.e. when [<currentTiddler>has[value]] is empty). For example perhaps it could appear translucent, or a different color.

Is there any way to achieve this?

Thanks :slight_smile:

#2

What about in the view template, wrapping it in a $list widget, set the variable so it does not change the currenttiddler and add the emptyMessage to display when empty.

<$list filter="[<currentTiddler>has[value]]" variable=nul emptyMessage="visual indicator">

your range widget/content

</$list>
  • This is a very common method used in viewtemplates to ensure they are conditional often without setting the emptyMessage.
  • Of course you can provide different values to the emptyMessage parameter including wikitext, a transclusion of a tiddler containing your visual indicator.
#3

Try this:

<span style={{{ [<currentTiddler>!has[value]then[opacity:25%;]] }}}>
<$range field="value"/>
</span>

enjoy,
-e

1 Like