Using the range widget on NNNpx values

[TonyM]

Folks,

I am working on a tiddlywiki page layout that would benefit from using the range widget to make changes to the various sizes found in;

Control Panel .> Appearance > Theme Tweaks

• Unfortunately the values are stored as NNpx rather than simply NN
• I would like the number to update in real time and are thus unsure how to create a range slider that will do this

I would expect someone has already done this and could possibly share some code.

Thanks in advance

Tony

[Mark S.]

Think this is what you want. I've been using it regularly for about two weeks. I'm sure you can adjust it to the

tweaks you have in mind.

Good luck!

[TonyM]

ZMark

Thanks heaps. That is workable but I was hoping it could be adjusted dynamically. So the size can be dragged to fit.

However I have not conceived of how it is possible yet. This is a good start

Tony

[Mark S.]

What size are you referring to, and what number does it need to fit?

[Eric Shulman]

On Thursday, October 24, 2019 at 7:34:50 PM UTC-7, TonyM wrote:

Thanks heaps. That is workable but I was hoping it could be adjusted dynamically. So the size can be dragged to fit.

Try this:

First, change the following shadow definitions as shown:

$:/themes/tiddlywiki/vanilla/metrics/bodyfontsize

{{$:/temp/fontsize}}px

$:/themes/tiddlywiki/vanilla/metrics/bodylineheight

{{{ [{$:/temp/fontsize}multiply[1.3]] }}}px

$:/themes/tiddlywiki/vanilla/metrics/storywidth

{{$:/temp/storywidth}}px

$:/themes/tiddlywiki/vanilla/metrics/storyright

{{$:/temp/storywidth}}px

$:/themes/tiddlywiki/vanilla/metrics/tiddlerwidth

{{{ [{$:/temp/storywidth}subtract[86]] }}}px

Then, write your range controls like this:

Story width: <$range tiddler="$:/temp/storywidth" min="600" max="1000" default="770" /> {{$:/themes/tiddlywiki/vanilla/metrics/storywidth}}

Font size: <$range tiddler="$:/temp/fontsize" min="15" max="40" default="15" /> {{$:/themes/tiddlywiki/vanilla/metrics/bodyfontsize}}

That should do it.  Let me know how it goes...

enjoy,

-e

[TonyM]

Eric,

Thanks a lot that is a good way to implement such a mechanism. The Story with settings are not changing the look as I expected, but I will explore it further.

The suggested tiddlers are in the attached JSON file for anyone wanting to play

Regards

Tony

[Eric Shulman]

On Thursday, October 24, 2019 at 9:16:43 PM UTC-7, TonyM wrote:

Thanks a lot that is a good way to implement such a mechanism. The Story with settings are not changing the look as I expected, but I will explore it further.

Make sure you are using "fixed story, fluid sidebar" in the ControlPanel>Appearance>ThemeTweaks

-e

 

[TonyM]

Ah Yes,

My Mistake, Every wiki I touch, I usualy change that. 

Works well.

Thanks

Tony

[TonyM]

Placing the range widgets outside the story view such as in a tiddler tagged $:/tags/TopLeftBar works smoothly

Regards

Tony