6

I am using Mathematica 9.0 and Windows 7. I want to create a Slider that looks like the following:

enter image description here

I tried the following:

Slider[Dynamic[n], {1, 9, 1}, Appearance -> Large,
    ImageSize -> {300, 40}, ContinuousAction -> False, Background -> Black]

and got this:

enter image description here

How can I get this to look like the first image?

István Zachar
  • 47,032
  • 20
  • 143
  • 291
subbu
  • 2,304
  • 1
  • 13
  • 32
  • It doesn't answer your question directly but you might be able to combine LocatorPane with DynamicModule to do what you want. See the help section on `LocatorPane' with some examples which might help. – Jonathan Shock Mar 21 '13 at 07:23
  • @JonathanShock but in the below link output @Verbeia got same slider(what I want) without combining the both locatorPane and DynamicModule.why he got it like that?http://mathematica.stackexchange.com/questions/1373/how-to-create-interrelated-sliders – subbu Mar 21 '13 at 07:28
  • I don't see the Slider you want in the link you have written there. It appears to be a regular grey Slider. – Jonathan Shock Mar 21 '13 at 07:32
  • 3
    @subbu, you need to get a Mac for that kind of slider:) – kglr Mar 21 '13 at 07:32
  • 1
    Sliders and other GUI controllers are rendered by the platform you are using: they look different depending on whether you are on OSX, Win or something else. – István Zachar Mar 21 '13 at 09:24
  • Related: http://mathematica.stackexchange.com/q/20496/121 – Mr.Wizard Mar 22 '13 at 13:26

2 Answers2

10

If pre-version-9 (no gauges yet), one has to rely on custom built controllers. Here is a slider implementation using LocatorPane (I prefer lines with rounded caps instead of rectangles because of aspect ratio issues):

slider[Dynamic[var_], {min_, max_}] := Module[{x = 0},
   LocatorPane[
    Dynamic[{x, 0}, (x = First@#; var = Rescale[x, {-1, 1}, {min, max}]) &], 
    Graphics[{AbsoluteThickness@6, CapForm@"Round", Line[{{-1, 0}, {1, 0}}]},
     ImageSize -> {300, 30}, 
     AspectRatio -> .1, PlotRangePadding -> 0], 
    Appearance -> Graphics[{EdgeForm@{Thick, Black}, White, Disk@{x, 0}}, 
      ImageSize -> 20]]];

{slider[Dynamic@x, {-100, 100}], Dynamic@x}

Mathematica graphics

The very same with Locator (an extra Clip was necessary to prevent out-of-range values):

slider2[Dynamic[var_], {min_, max_}] := Module[{x = 0},
   Graphics[{
     AbsoluteThickness@6, CapForm@"Round", Line[{{-1, 0}, {1, 0}}],
     Locator[
      Dynamic[{x, 0}, (x = Clip[First@#, {-1, 1}]; var = Rescale[x, {-1, 1}, {min, max}]) &],
      Graphics[{EdgeForm@{Thick, Black}, White, Disk@{x, 0}}, 
       ImageSize -> 20, AspectRatio -> 1]]
     }, ImageSize -> {300, 30}, AspectRatio -> .1, 
    PlotRangePadding -> .1]];

{slider2[Dynamic@x, {-100, 100}], Dynamic@x}

Even simpler implementation with EventHandler and Point (to fully eliminate dependency on aspect ratio).

x = .5;
Graphics[{
  AbsoluteThickness@6, CapForm@"Round", Line[{{0, 0}, {1, 0}}],
  EventHandler[
   {Black, AbsolutePointSize@20, Dynamic@Point@{x, 0},
    White, AbsolutePointSize@15, Dynamic@Point@{x, 0}},
   "MouseDragged" :> {x = Clip[First@MousePosition@"Graphics", {0, 1}]}]},
 ImageSize -> {200, 20}, AspectRatio -> .1]
István Zachar
  • 47,032
  • 20
  • 143
  • 291
  • Is it possible to include Appearance -> Labeled and make it editable as in the normal Slider? The editable part seems to be tricky since I can't do it over a dynamic label, for example, but maybe there's a more straightforward approach? – sam wolfe Jul 09 '21 at 08:25
8

You could always try a gauge:

gf[{{xmin_, xmax_}, {ymin_, ymax_}}, ___] := 
 {Black, 
  Rectangle[{xmin, -0.01}, {xmax, 0.01}, 
  RoundingRadius -> .01]}

HorizontalGauge[Dynamic[n], {1, 9},
 ScaleDivisions -> None,
 ScaleRanges -> All,
 ScaleRangeStyle -> None,
 GaugeFaceElementFunction -> gf,
 GaugeMarkers ->  Placed[
   Graphics[{Black, Disk[{0, 0}, 1],
      White, Disk[{0, 0}, .8]}], "Center"],
 ImageSize -> {400, 50}
 ]

The slight error in my code appears to give a cool 3D effect...

But I can't see why this would be worth doing...

gauge

cormullion
  • 24,243
  • 4
  • 64
  • 133
  • +1 Nice, definitely gauges are better costomizable than sliders. Is the horizontal light line on the black bar something that HorizontalGauge adds, or is it just an export-artifact? – István Zachar Mar 21 '13 at 13:10
  • @IstvánZachar I can't work out what it is. It appears to be the line along which the marker moves, but I can't see what controls it... – cormullion Mar 21 '13 at 13:23
  • @IstvánZachar and cormullion: Yes, that line is the path along which the marker moves. You can remove that line with AxesStyle -> None and also trim out the excess padding at the ends with ScalePadding -> None – rm -rf Mar 21 '13 at 16:06
  • @rm-rf ah yes, I forgot that gauges have all the Graphics options too... – cormullion Mar 21 '13 at 16:14
  • @rm-rf That is strange, as the default for HorizontalGauge is Axes -> False. – István Zachar Mar 21 '13 at 22:31
  • @IstvánZachar Yeah, I don't think you can trust them. It seems to have been sloppily implemented... For instance, the simplest gauge: HorizontalGauge[50, {0, 100}] supposedly has AxesStyle -> {None, None}, but try entering that as an explicit option and it complains. – rm -rf Mar 21 '13 at 22:41