Adding numbers to a range slider in settings

Authoring Twine
1

I have been trying to find a way to add numbers to the settings range sliders (Setting.addRange()) for a few hours now. I have a hacky solution that kinda works but it causes the settings menu to scroll to the top.
The hacky solution:

Setting.addRange('test', {
    label: 'Test:<span id="test_value"></span>',
    default: 50,
    min: 0,
    max: 100,
    step: 1,
    onChange : function () {
        $('#test_value').text(' (' + settings.test + ')');
    }
});

Is there a better solution than this or should I just implement my own settings page using a passage and slideWin?

2

First off, welcome to the community!

I’m not familiar with SugarCube (one day I’ll try my hand at it), but I did find a very cool collection of code samples.

Check out the slider code here.

The rest of the code samples can be found here… https://www.patreon.com/posts/general-twine-23769265 …and you definitely can’t go wrong looking through them all.

There might be a trick in the example slider code that will spark the answer you seek. Otherwise, I’m sure someone else will chime in soon. There was just a big IF competition ending today and lots of people are busy with that at the moment.

I hope this helps. Good luck!

1 Like
3

As far as I know SugarCube only allows the settings menu to be constructed using the functions defined under Settings API in the SugarCube docs. Sadly that means that I can’t use the code that you provided. I have provided what I ended up doing below. I hope this helps anyone else having the same irritations with the Settings API as me.

  1. Create a passage named Settings that handles showing and setting setting variables
  2. Use slideWin (search “slidewin sugarcube” on google and then select the result for DriveToWeb) inside of a button to provide access to the menu from my setup passage
<<button 'Settings'>>
    <<run slideWin('Settings')>>
<</button>>
  1. Create a passage named “StoryMenu” with the following code allowing access to the settings menu from the sidebar
<<link "Settings">><<run slideWin("Settings")>><</link>>

This allows you to do anything you can do in a standard SugarCube passage!
For example I ended up using the JQuery UI library to get double handle sliders.

P.S. I would have provided links but my current permissions don’t allow it. If I remember to I will come back to this and add the links

3 Likes
4

Note: slideWin doesn’t cause passage traversal. So any changes made in it won’t be saved until the player traverses to a new passage. This is probably true of the original settings menu, but I didn’t notice it. After some research I have decided that my solution is to tell the player that the settings are applied on passage traversal (which is true anyway). A solution that can cause problems and isn’t advised would be to edit SugarCube’s history object directly. Another solution would be to use SugarCube’s memorize(), recall(), and forget() functions to store the settings in LocalStorage temporarily, but this requires a lot of micro management.

2 Likes
5

It has been long enough that IF won’t let me edit the original post so I will provide the links that would have been there in this post.
I have also added a link to a forked version of JQuery UI touch punch, because JQuery doesn’t have native touch screen (mobile) support.
I have also added a link to liveupdate because I find it very useful for updating passages immediately to match settings.
Settings API for settings menu functions
slideWin
StoryMenu
JQuery UI
JQuery UI touch punch
memorize()
recall()
forget()
liveupdate

This is my last post on this thread (I hope)

1 Like