The TWCore setting `$:/themes/tiddlywiki/vanilla/metrics/bodyfontsize` 
assumes that it includes the CSS units (e.g., “px”). However, the $range 
widget only sets a numeric value, thus losing the default “px” suffix.

To work around this, try the following:
```
<$let target="$:/themes/tiddlywiki/vanilla/metrics/bodyfontsize">
<$range tiddler="$:/temp/bodyfontsize" class="slider"
   min="14" max="44" increment="1" default={{{ 
[<target>get[text]multiply[1]] }}}
   actions="<$action-setfield $tiddler=<<target>> text={{{ 
[<actionValue>addsuffix[px]] }}}/>"/>
```

   - Have the $range widget store its result in a temp tiddler (e.g., 
   $:/temp/bodyfontsize)
   - Set the default value to the contents of 
   $:/themes/tiddlywiki/vanilla/metrics/bodyfontsize and multiply by 1 to 
   remove any CSS units suffix while retaining the numeric portion of the 
   current setting value.
   - Add an actions="..." parameter that copies the temp tiddler value to 
   the actual target tiddler while also adding the desired “px” suffix.

In addition, the “reset” button should delete both the temp tiddler and the 
target tiddler, so the default TWCore shadow is re-applied and is also used 
as the default value for the $range widget:
```
<$action-deletetiddler $filter="[[$:/temp/bodyfontsize]] [<target>]"/>
```
On Friday, May 19, 2023 at 12:49:40 AM UTC-7 S² wrote:

>
> Hi Charlie,
> if I do the same for Font size for tiddler body 
> <https://tiddlywiki.com/#%24%3A%2Fthemes%2Ftiddlywiki%2Fvanilla%2Fmetrics%2Fbodyfontsize>
>  
> I'm loosing the suffix "px" when using the slider.
>
> <span style="font-size: 0.85em;font-weight: 600;">
>  Schriftgröße (Anzeige): </span> &nbsp;
> <$range tiddler="$:/themes/tiddlywiki/vanilla/metrics/bodyfontsize" 
> min="14" max="44" default="20" increment="1" class="slider"/> 
> &nbsp; 
> <span style="font-size: 0.85em"> 
> {{$:/themes/tiddlywiki/vanilla/metrics/bodyfontsize}} </span>
>
> <$button class="tc-btn-invisible" tooltip="Reset">
> <$action-setfield 
> $tiddler="$:/themes/tiddlywiki/vanilla/metrics/bodyfontsize" 
> text="20px"/>&nbsp;
>
> <span style="font-size:1em;">''↺''</span>
> </$button>
>
> (Actual I put "20px" to the reset button.)
>
> Any idea how to keep it?
> Thanks, Stefan
> Charlie Veniot schrieb am Donnerstag, 18. Mai 2023 um 22:39:18 UTC+2:
>
>> There are a few problems in your TW scripting.
>>
>> The first line, action-setfield.   All action widgets have to be the 
>> result of something happening (like clicking on a button).  That action 
>> doesn't have anything to trigger it, so it will never happen.
>>
>> The other action-setfield does happen when pushing on the button.  It 
>> correctly sets the "bodyfontsize" metric.
>>
>> The slider, though, sets the text value for a tiddler that is used in 
>> your CSS to set the font size of tc-edit-text-editor-body.
>>
>> tc-edit-text-editor-body and "bodyfontsize" are two different things.
>>
>> If you use the TiddlyWiki control panel, setting the bodyfontsize does 
>> have an impact on the font size for tc-edit-text-editor-body (have a 
>> tiddler in edit mode while changing things in the control panel to see what 
>> happens), but it isn't a 1-1 relationship.
>>
>> What "one" thing are you trying to accomplish here?
>>
>> On Thursday, May 18, 2023 at 4:54:18 PM UTC-3 S² wrote:
>>
>>> Hello forum,
>>>
>>> inspired by @Charlie Veniot I tried to add the reset button to my wiki - 
>>> but no effect when clicking on the button.
>>> Any idea why?
>>>
>>> Also tested on https://tiddlywiki.com/
>>> [image: code.png]
>>> *Code:*
>>> <$action-setfield 
>>> $tiddler="$:/themes/tiddlywiki/vanilla/metrics/bodyfontsize" 
>>> text={{fontsizeValue}}/>
>>> <span style="font-size: 0.85em; font-weight: 400;">Schriftgröße 
>>> (Editor): </span>&nbsp; 
>>> <$range tiddler="fontsizeEditor" min="16" max="24" default="18" 
>>> increment="0.5" class="slider"/> 
>>> &nbsp;
>>> <span style="font-size: 0.7em"> {{fontsizeEditor}} px </span>
>>> <$button class="tc-btn-invisible" tooltip="Reset">
>>> <$action-setfield 
>>> $tiddler="$:/themes/tiddlywiki/vanilla/metrics/bodyfontsize" 
>>> text="18px"/>&nbsp;
>>> <span style="font-size:1em;">''↺''</span>
>>> </$button>
>>>
>>> with 
>>> [image: Stylesheet.png] 
>>>
>>> Thanks for help.
>>> Stefan
>>>
>>> Charlie Veniot schrieb am Donnerstag, 18. Mai 2023 um 19:20:47 UTC+2:
>>>
>>>> Done.  Plus a "reset" button.
>>>>
>>>> [image: Screenshot 2023-05-18 2.19.38 PM.png]
>>>>
>>>> On Thursday, May 18, 2023 at 10:50:52 AM UTC-3 Scott Sauyet wrote:
>>>>
>>>>>  Charlie Veniot wrote:
>>>>> > Just for the giggles to figure out how I would go about it.
>>>>>
>>>>> Very nice!  One suggestion: make the max 200 or so rather than the 
>>>>> default 100.  Help those with poorer eyesight!
>>>>>
>>>>>   -- Scott
>>>>>
>>>>

-- 
You received this message because you are subscribed to the Google Groups 
"TiddlyWiki" group.
To unsubscribe from this group and stop receiving emails from it, send an email 
to tiddlywiki+unsubscr...@googlegroups.com.
To view this discussion on the web visit 
https://groups.google.com/d/msgid/tiddlywiki/4f16543c-372e-4af0-9afd-39b9230f0a32n%40googlegroups.com.

Reply via email to