In-passage equivalent of Setting.addToggle?

Authoring Twine
1

I’m using
Tweego Version: 2.1.1
Story Format: SugarCube v2.36.1

Is there a macro which provides the visual equivalent of SugarCube’s UI “Setting.addToggle” which can be used within a passage? I can’t find one in the SugarCube documentation. Did I overlook it?

While the macro “checkbox” is functionally equivalent, letting the author give the reader a choice between “on” and “off” values, I’d like to be able to display alternating on/off “sliders” like those shown in the UI column’s Settings menu.

My own attempts to write such a macro have not been very productive, and my Web searches haven’t been successful, either. :frowning:

2

I don’t think there is a macro equivalent to the Setting Toggle. In the HTML Code of the Setting Dialog, the toggle is a button with the on/off icon (from the SugarCube built-in font).

I have a widget from one of my project, which uses the <<checkbox>> macro in the same fashion, made it to look like the Setting button. (I have no idea where I found this code, I know I didn’t come up with it, maybe an old Forum post? but the code works)

In the passage: <<screentoggle "_sound" true>>
In the widget passage:

<<widget "screentoggle">>
   <<if $args[1] is true>>
         <label class="screen-toggle"><<checkbox $args[0] false true checked>><span> </span></label>
   <<else>>
	<label class="screen-toggle"><<checkbox $args[0] false true>><span> </span></label>
    <</if>>
<</widget>>

In the CSS:

label.screen-toggle input[type="checkbox"] {
   display: none;
}

label.screen-toggle input[type="checkbox"]:not(:checked) + span::before {
  content: "Off";
}

label.screen-toggle input[type="checkbox"]:not(:checked) + span::after {
  font-family: tme-fa-icons;
  font-style: normal;
  font-weight: 400;
  font-variant: normal;
  text-transform: none;
  content: "\e830";
}

label.screen-toggle input[type="checkbox"]:checked + span::before {
  content: "On\00a0";
}

label.screen-toggle input[type="checkbox"]:checked + span::after {
  font-family: tme-fa-icons;
  font-style: normal;
  font-weight: 400;
  font-variant: normal;
  text-transform: none;
  content: "\e831";
}

label.screen-toggle span {
  display: inline-block;
  cursor: pointer;
  line-height: normal;
  color: lime;
  padding: .2em .4em;
  text-shadow: 0 0 25px lime;
  border: 2px ridge lime;
  margin: 0 1%;
  border-radius: 10px;
  border-style: ridge;
}
3

Thanks! I’ll give it a try.