How to create input field sliders? (HTML code provided)

[M. Roest]

I am not too familiar with TiddlyWiki yet unfortunately. So I intermix HTML with TiddlyWiki's tags.

I have a couple of sliders like so:

<div class="slidecontainer">
  <input field="slider1" type="range" min="1" max="100" value="-1" class="slider">
  <label for="goal1">Interactive Neural Networks (1 hour)</label>
</div>


<div class="slidecontainer">
  <input field="slider2" type="range" min="1" max="100" value="-1" class="slider">
  <label for="goal2">Data Structures & Algorithms MIT (1 hour)</label>
</div>

What I want is for the values to be stored.

In TiddlyWiki tags such as $radio there is a field attribute. Obviously, this is not possible with simple HTML. 

I couldn't find a slider tag (also because the word "slider" is used for something else in the TiddlyWiki world, see https://groups.google.com/forum/#!topic/tiddlywiki/TXk4XZpO6a8).

So how do I make sure the values of my sliders are bound to the TiddlyWiki itself?

I am using TiddlyWiki as a daily journal.

[Jed Carty]

There is a range widget built in for this purpose. https://tiddlywiki.com/#RangeWidget

[TonyM]

M

Html can often be used to great effect in tiddlywiki however if you want to store your result, do what you normally do with html javascript, you need to use the widgets. The primary reason as I see it is the widgets honor the tiddlywiki refresh and relationships. Many of the widgets actually cater for html tags. Almost anything you would do in html is possible so I recommend widening your search in tiddlywiki.com or these forums.

If you find something you can't do ask us for it. The worst case is a plugin or macro can be built to do it.

The details tag works as does a plugin that gives us the <$details widget.

If Jeds answer was not what you were looking for, explain here what functionaly you are after and we can help.

Regards
Tony

[M. Roest]

I have a few issues.

1) 

... resolved

2)

I did download version 5.19 to see if the range widget suited my needs. There is one issue with it: the following code kind of works but is not as smooth as if I would store the data in a new tiddler.

<$range field="range1" min="1" max="100" default="1" increment="1"/> <$view field="range1">

I want to store it in a field because I want every tiddler to contain its own data. It makes it for easier parsing once I want to visualize or calculate some statistics on my data.

3)

Edit: solved with <$transclude field="range1">

I still find it weird that <$view field="range1"> does not display the remainder of the page.

[Mark S.]

Because of the way TW renders, changing a field of a tiddler that you are already in will not be smooth.

But if you put

<$range field="range1" min="1" max="100" default="1" increment="1"/> <$view field="range1">




(notice the fix on the view widget) into a tiddler and tag it as $:/tags/ViewTemplate




then it will appear on every tiddler, and the motion will be smooth. Of course you do not want the


template to apply to every tiddler, so you will need to wrap your rang widget in a list widget that

specifies some condition:




<$list filter="[all[current]tag[Test]]">
<$range  field="range1" min="1" max="100" default="1" increment="1"/><$view  field="range1"/>
</$list>




I don't understand what you mean in issue #3.




Good luck


[TonyM]

A quick point.

There is also the range operator. Used in a list (wrapped by a button) you can set a field with an action widget and do a bulk set action.

Then once the existing tiddlers are standardised use a custom new tiddler button to create new ones to standard.

Regards
Tony