Button turns into fader

Community Usage questions
1

Is it possible to morph a button into a fader and control that fader all in one touch?

I want to control the metronome volume but don't want the fader taking up screen real estate. I would like a small button that I can press and hold and then slide up and down to control the volume. When I release, only the button is visible again.

Thanks for your help.

2

I've done it using just an horizontal compact fader of the same size as a button. Slide left for volume 0, slide right for max volume, double-tap for 75% volume, or adjust at will.

3

thank you for your thoughts. It's a nice workaround, but I would like the extra precision of exploding out to a large fader when touched.

4

It's not possible to morph a button into a fader, but you can use css to make the fader grow when touched. This along with the sensitivity property gives a nice workaround: faderZoom.json (2.2 KB) (v1.9.0 required)

5

Great! Thanks!

It works with a mouse click, but not touch...hrmm....what have i missed

6

Well it seems the trick doesn't work on touch devices. Here's another one: faderZoom2.json (3.8 KB):

  • 1 small fader
  • 1 big fader whose visibility depends on a variable widget
  • 1 variable widget, updated using the small fader's scripting
7

A thing of beauty. Thank you so much

8

Here's another solution, without the use of extra widgets.

css:

transform: scale(VAR{scaleFactorX},VAR{scaleFactorY});
z-index: VAR{zIndex};

script:

if (touch !== undefined) {
  if (touch === 1) {
    setVar("this","scaleFactorX", 3);
    setVar("this","scaleFactorY", 8);
    setVar("this","zIndex", 1000);
   }
  else {
    setVar("this","scaleFactorX", 1);
    setVar("this","scaleFactorY", 1);
    setVar("this","zIndex", 1);
  }
}

scalingFaders.json (14.8 KB)

1 Like