Presenting: Range Slider - sliiiide 'em settings, baby!

[Mat]

The Frontal Cortex Team at TWaddle Global Enterprises Inc. just released a new thingy 

...but for which they CANNOT REALLY TAKE CRED

...because it is already build into TW !

...but chances are you didn't know:

Range Slider

also: @ttention Hans Duckwurst

<:-)

[@TiddlyTweeter]

Re Hans Duckwurst. The best I found was "... servers brought out platters of roasted duck, wurst and ..... Hans was happy to see that the Emperor and Regent had made it safely to ..."

Range Slider is rather good. Please give me an objective for its utility.

Josiah

[Mark S.]

It would be useful if it could be adapted to set the various font and width sizes inside the configuration dialog. Currently you have to type over the numbers. At points, you have to type blind because the screen becomes unreadable as you delete and replace digits. I actually have my own system, which allows you to use a scrollable select field and then save the key values for use on different platforms. (I should post that some time).

Mark

[Mat]

On Sunday, June 18, 2017 at 12:38:53 AM UTC+2, @TiddlyTweeter wrote:

Re Hans Duckwurst. The best I found was "... 

Mr. Duckwurst keeps a low profile here but I had the pleasure of getting to meet him recently. An excellent host too, serving crisps like nobodys business. I noted he was using a  TW to display various controls for his vehicle so was thinking a combo of an indicator and a control might be useful. 

 

Range Slider is rather good. Please give me an objective for its utility.

If you really want to try it out, you could use it to set e.g the various Settings fields (tiddler width etc). Note that you'll need to be able to set bigger values than 100 for some of those though. I'll probably file a PR request to extend the EditTextWidget to include a max/min as the original html element has.

<:-) 

[Mat]

On Sunday, June 18, 2017 at 1:07:54 AM UTC+2, Mark S. wrote:

It would be useful if it could be adapted to set the various font and width sizes inside the configuration dialog.

Heh, just what I suggested too.

Actually, I did this many hears ago for TWaddle, here. So you can try it out there if you want. But from a brief glance there now I looks like I've circumvented the problem with the range slider only going from 0-100 by putting the number in a separate tiddler and then have the various measurements fetch the value from that tiddler but inside a CSS calc() attribute. I.e

.mystyle {
  width: calc({{myvaluetiddler}}% * 1vw);
}

Come to think of it, this is probably one of those things I could have included in my "CSS in TW" presentation. That calc() thingy in CSS is darn cool.

At points, you have to type blind because the screen becomes unreadable as you delete and replace digits. I actually have my own system, which allows you to use a scrollable select field and then save the key values for use on different platforms. (I should post that some time).

Sounds interesting. 

<:-)

 

 

[Mark S.]

I've never noticed that calc before. That is cool. What does "* 1vw" do ? Multiply by Volkswagens?

Thanks,
Mark

[Mat]

Mark S. wrote:

I've never noticed that calc before. That is cool. What does "* 1vw" do ? Multiply by Volkswagens?

Haha! Yeah, either that or it's a CSS unit. It stands for "view-width", i.e

.mystyle {
  width: calc({{myvaluetiddler}}% * 1vw);
}

I recommend checking out calc(). Very useful. It can do math on things with different css units. In this case above, it transcludes the number and adds % as unit and multiplies it with the viewport width. Note that the transclusion didn't have to have a unit, it could also read calc({{myvaluetiddler}} * .01 * 1vw)

For another thing I'm just experimenting with, I tried to "extract" the css calc() so it can be used for other things but no success. In the research process I stumbled over this fun trickery for a pure CSS calculator. Clearly unusable, but really fun.

<:-)

[ste...@gmail.com]

I could picture myself using this e. g. for rating individual tiddlers and then using the result as a criteria for sorting. However, this would only work for values between 10 and 99. Otherwise, leading zeros would have to be added. Are there any workarounds?

(I know that great plugins for rating tiddlers already exist, such as this one: http://tobibeer.github.io/tw5-plugins/#rate)

Cheers,

Stef

[PMario]

Hi Mat,

It seems your latest projects carry the Upgrade library around. ...

The TW is 13MByte in size. so it loads incredibly slow. at least for me. 20++ seconds  .. Please also check you latest stuff. I did experience the slow load time several times already. ... I thought my browser crashed. I never wait much longer than about 5 seconds for a page to load.

-m

[Jed Carty]

That looks really good, and It think that Hans Duckwurst will have plenty of use for this.

[Mark S.]

The specs for the range type of input element allow min and max values. It appears that the <$edit-text> widget doesn't pass those along. Maybe a future version could?

[Eric Shulman]

On Sunday, June 18, 2017 at 8:30:06 AM UTC-7, Mark S. wrote:

The specs for the range type of input element allow min and max values. It appears that the <$edit-text> widget doesn't pass those along. Maybe a future version could?

There are THREE params available for type="range":

 * min (the smallest value, default = 0)

 * max (the largest value, default = 100)

 * step (the increment, default = 1)

To support use of these params in the <$edit-text> widget, all that is needed is to pass their values along to the underlying HTML input element.

To do this, just two small *additions* to the core are needed:

in $:/core/modules/editor/factory.js,

at the end of EditTextWidget.prototype.execute()

add:

this.editRangeMin  = this.getAttribute("min");
this.editRangeMax  = this.getAttribute("max");
this.editRangeStep = this.getAttribute("step");

and in $:/core/modules/editor/engines/simple.js,

in the SimpleEngine(options) function

following the existing code pattern after "// Set the attributes"

add:

if(this.widget.editRangeMin) {
   this.domNode.setAttribute("min",this.widget.editRangeMin);
}
if(this.widget.editRangeMax) {
   this.domNode.setAttribute("max",this.widget.editRangeMax);
}
if(this.widget.editRangeStep) {
   this.domNode.setAttribute("step",this.widget.editRangeStep);
}

enjoy,

-e

[ste...@gmail.com]

Hi Eric,

On Sunday, June 18, 2017 at 5:53:45 PM UTC+2, Eric Shulman wrote:

To support use of these params in the <$edit-text> widget, all that is needed is to pass their values along to the underlying HTML input element.

To do this, just two small *additions* to the core are needed:

I tested your changes in a local TW and they seem to work fine. Now it's also possible to define ranges that could be used for sorting (1-9, 10-99 etc., see my post above).

Looks great! Thank you!

-- Stef

[Mark S.]

Do you think it would be good if someone (maybe me) put together a PR with these changes? Or is there some reason <$edit-text> shouldn't get these values?

Thanks!
Mark

[Jed Carty]

I don't think there is a problem with giving edit-text the additional parameters, but we may want to give it an alias so that you can use the edit-text widget or you can use the range widget (or whatever name is appropriate) because ease of use is important and to someone who doesn't know what the input html tag is having the two as the same widget would be a bit confusing.

I think that you could do an alias like this by just adding another module.exports line at the bottom of the file, but we would want to have different default behaviour for each one. Which may twist back around to just having separate widgets.

I will try to poke this a bit today because I am avoiding doing my phd work. A pull request to just add the parameters to the edit-text widget is probably a good idea regardless of if there is also another widget.

[Mat]

PMario wrote:

It seems your latest projects carry the Upgrade library around. ...

 

THANK YOU SO MUCH MARIO!!!!!!!!!!  

I've been really confused why things load and save so slowly for a few months now! I'll have to go back an correct all wikis I've made.

This is such a relief. Thank you!

<:-)

[PMario]

On Monday, June 19, 2017 at 2:50:00 PM UTC+2, Mat wrote:

PMario wrote:

It seems your latest projects carry the Upgrade library around. ...

 

THANK YOU SO MUCH MARIO!!!!!!!!!!  

you are welcome!
 

I've been really confused why things load and save so slowly for a few months now! I'll have to go back an correct all wikis I've made.

I was confused too. I did start the debugger, to see, if there are error messages. .. nothing .... After searching long enough, TW suddenlyk started. ...

Anyway. ... great stuff!
-m

[Mat]

@Eric - yes, customizable min/max/step are the missing pieces in the edittextwidget. 

@Jed - good reasoning about turning this into a separate widget. Range sliders are just way different than the normal edittextwidget use case that it surely would be confusing for users. Plus the edittextwidget already has many parameters...of which many are already confusing!

Would be terrific if something is worked out. 

<:-)

[Jed Carty]

As  a quick note from poking the code, I think that just making a new widget for the range slider is the way to go. The code for the edit-text widget is so complex because of how much it does that I don't think that adding more to it is a good idea. It should be a relatively simple widget to create.

[Mark S.]

From my perspective, tweaking the edit-text code is better, because Eric has already shown how to do that. Edit-text is going to continue to be complicated anyway -- no one is talking about rolling back any of its options.

Mark

[Thomas Elmiger]

I would support what Mark says: the edit-text widget should be extended. An alias (a macro?) to simplify range slider creation would be an option.

Thanks!
Thomas

[Mat]

On Monday, June 19, 2017 at 5:33:12 PM UTC+2, Mark S. wrote:

From my perspective, tweaking the edit-text code is better, because Eric has already shown how to do that. Edit-text is going to continue to be complicated anyway -- no one is talking about rolling back any of its options.

Regarding "edit-text is going to be complicated anyway" - I don't see why it has to be. 

Rather than rolling back options, they can (I'd guess) remain but they just don't have to be promoted. Actually, just like the range type wasn't promoted even if it was already possible.

IMO it makes sense to take advantage of the underlying html elements and partly mirror those, if this is not already done. What we're really talking about is the html Input element, which has a plethora of types. If it is not already done, it would probably make sense to implement a common "kernel" for the HTML Input type and then make widgets that use this common kernel but add various attributes for the particular form.

<:-)

[Alex Hough]

Hi TiddlyWikers,

I was looking to make a slider with 1-10 options.

Eric made a suggestion how to do this above.

What's the current feeling on including them?

Alex

--
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+unsubscribe@googlegroups.com.
To post to this group, send email to tiddl...@googlegroups.com.
Visit this group at https://groups.google.com/group/tiddlywiki.
To view this discussion on the web visit https://groups.google.com/d/msgid/tiddlywiki/f8c31e21-b75f-4262-92e9-6a24221f8fa4%40googlegroups.com.

For more options, visit https://groups.google.com/d/optout.

[Jed Carty]

I did make a very simple range slider widget that lets you set the min max and steps for the widget. It doesn't label the steps. It should work if you just need a range thing that gives you values from 1-10 instead of 1-100 though.

http://ooktech.com/jed/ExampleWikis/InputRangeSliderWidget/

[Alex Hough]

Thanks Jed,

that does the job!

BTW, why does't the value change when the slider is being moved? Is it intentional?

I rather like seeing the number change while i slide my sliders!

Alex

On 19 February 2018 at 08:38, Jed Carty <inmy...@gmail.com> wrote:

I did make a very simple range slider widget that lets you set the min max and steps for the widget. It doesn't label the steps. It should work if you just need a range thing that gives you values from 1-10 instead of 1-100 though.

http://ooktech.com/jed/ExampleWikis/InputRangeSliderWidget/

--

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+unsubscribe@googlegroups.com.
To post to this group, send email to tiddl...@googlegroups.com.
Visit this group at https://groups.google.com/group/tiddlywiki.

To view this discussion on the web visit https://groups.google.com/d/msgid/tiddlywiki/ad9898e0-a417-43c1-be35-cbbb9a641de1%40googlegroups.com.

[Jed Carty]

It looks like the change event only fires when you stop moving the slider. It looks like if I use the input event instead of the change event it may work the way you want. I am not anywhere I can test this right now though. If you edit the $:/plugin/inmysocks/rangewidget/range.js tiddler and replace the lines

$tw.utils.addEventListeners(this.inputDomNode,[
		{name: "change", handlerObject: this, handlerMethod: "handleChangeEvent"}
	]);

with

$tw.utils.addEventListeners(this.inputDomNode,[
		{name: "input", handlerObject: this, handlerMethod: "handleChangeEvent"}
	]);

then save and reload your wiki it may work.