HTML5 Range slider input element - not working in TW5

[Mat]

The HTML5 Range slider input form element is interesting. Basically it's a visual analog "volume control" type slider to set a value.

But, in spite of it being a html element, it doesn't work in TW as far as I can tell.

Among other things, I hope to use it for experimenting with numeric CSS values.The slider could store a value in a state tiddler which is then transcluded into the CSS attribute. I hope to have a permanent slider somewhere that I just switch target for where it should apply.

For one thing, I think it could be used to make a much better UI for the Stylesheets. Considering how much of an impact the Stylesheets have on the UI, they are "unproportionally neglected". The Theme Tweaks is, I guess, the attempt to handle this - but even here a Range slider could be of use for some values (there is little reason why a user should have to specify an exact number of pixels or % for the tiddler river width etc).

So.. any ideas how to make the Range slider input work in TW?

Further, to see the output value from a Range input, you apparently need another html element; the output tag.

Here's a jsfiddle example showing it does not use any javascript or CSS. It includes in a form which seems necessary there but in many other examples (see below) it does not seem required.

Articles on the Range input element

• Here's a nice general intro article by web desginer on how to use it, a bit on styling etc
  
• StackOverflow article with multiple methods for showing the output. I tried all but can't get any to work.
  
• w3schools reference
  
• W3.org reference on Range
  
• Styling across differenc browsers.
  
• Article describing how to make the slider handle show a value bubble.
  

Articles on the Output tag

• w3schools reference
  
• General intro article by web designer
  
• General technical article

<:-)

[Eric Shulman]

On Saturday, May 9, 2015 at 1:34:00 AM UTC-7, Mat wrote:

The HTML5 Range slider input form element is interesting. Basically it's a visual analog "volume control" type slider to set a value.

But, in spite of it being a html element, it doesn't work in TW as far as I can tell.

Among other things, I hope to use it for experimenting with numberic CSS values.The slider could store a value in a state tiddler which is then transcluded into the CSS attribute. I hope to have a permanent slider somewhere that I just switch target for where it should apply.

So.. any ideas how to make the Range slider input work in TW?

This really caught my interest.... so.... I went ahead and wrote a <$range>...</$range> widget.

I've added it into my "Inside TiddlyWiki" work in progress...

http://tiddlytools.github.io/InsideTW/#InsideTW%2FWidgets%2FRangeInfo

http://tiddlytools.github.io/InsideTW/#InsideTW%2FWidgets%2Frange.js

I've used it to control the font size settings in various places within the document

(look for the "settings" cog in the upper right corner of the left sidebar).

Note: Please just download the range.js widget (and related RangeInfo).

Don't grab that whole document yet, as it is very much "in progress", and LOTS of changes will be made.

If there are other bits and pieces that you really want to copy and use right now, please ask first, as I plan on publishing an empty "twBook" vertical edition as well as distributing many of the customizations as an all new "TiddlyTools5" plugin libary site (coming soon!)

In the mean time, I hope you enjoy this little early teaser of things to come.

enjoy,

-e

Eric Shulman

TiddlyTools / ELS Design Studios

Inside TiddlyWiki: The Missing Manuals

YOUR DONATIONS ARE VERY IMPORTANT!

HELP ME TO HELP YOU - MAKE A CONTRIBUTION TO MY "TIP JAR"...

   http://TiddlyTools.github.com/fundraising.html#MakeADonation

[Mat]

.... I went ahead and wrote a <$range>...</$range> widget.

BANG !

 

 I plan on publishing an empty "twBook" vertical edition

KA-BOOM !!

an all new "TiddlyTools5" plugin libary site (coming soon!)

MUSHROOM CLOUD !!!

Mercy, man!!! It's Sunday for heavens sake and my poor 42-year old heart can only take so much ;-)

Seriously, this is the best news for TW in a loooong time!

<:-)