I'd like to create a button that works like the gif below. I'm not concerned with the content of the field changing. I just want to learn how to create a button that looks and works like the one in the gif. The button should be clickable on the top and bottom and temporarily become blue when clicked so that you know you clicked it. Togglerbar and setterbar do not seem to work this way. Is there another button option or a modification that I can use to get this functionality?

enter image description here


You can use two individual instances of Button

Button["\[UpArrow]", Print["up"]], 
Button["\[DownArrow]", Print["down"]]},
Spacings -> -1]


Unfortunately Button misbehaves on some systems when it comes to changing its size to just encompass its label (see this question). You might also notice a small optical glitch (visible in the .gif above as well) that when pressing the top button, part of the bottom button gets hidden behind a white margin.

Together with an InputField and smaller labels to fit in one row with the InputField the whole thing might look like this


DynamicModule[{x = 0},
     InputField[Dynamic@x, FieldSize -> 2], 
             Button["\[FilledUpTriangle]", x++, ImageSize -> Small], 
             Button["\[FilledDownTriangle]", x--, ImageSize -> Small]}, 
             Spacings -> -0.65]

I thought this would fun to try. I got something close, but perhaps not close enough to get a cigar.

With[{size = 20}, 
  up = 
      {Circle[{0, .75}, 1, {0, π}], 
       Line[{{-1, .75}, {-1, 0}, {1, 0}, {1, .75}}],
       Triangle[{{-.75, .75}, {0, 1.5}, {.75, .75}}]},
      ImageSize -> size];
  down = 
      Rotate[#, 180 °, {0, 0}] & /@ 
        {Circle[{0, .75}, 1, {0, π}], 
         Line[{{-1, .75}, {-1, 0}, {1, 0}, {1, .75}}],
         Triangle[{{-.75, .75}, {0, 1.5}, {.75, .75}}]},
      ImageSize -> size]];

  {{n, 0}, None},
      {Button[up, n++, Appearance -> None],
       Button[down, n--, Appearance -> None]},
      Spacings -> 0],
    ContentPadding -> False,
    FrameMargins -> None],
  AppearanceElements -> None,
  ControlPlacement -> Right]

This certainly has the desired functionality. The question is whether or not it fakes the desired look-and-feel well enough.


  • $\begingroup$ @Sascha. Thanks for the animated GIF. $\endgroup$ – m_goldberg Dec 16 '16 at 7:40
  • $\begingroup$ You are welcome:) if you are using macOS I can highly recommend this app for capturing .gif files from your screen $\endgroup$ – Sascha Dec 16 '16 at 7:44

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.