Angle slider

The dial is drawn on a canvas. It has a track ring, a filled arc from 12 o'clock to the current angle, a round handle on the ring, and the angle in the center, such as 45°. The default size is 160 units.

The ring is the control, and no native slider sits under it. A touch sends your screen a {:drag, tag, payload} message with the touch position, and angle_at/3 converts that position to degrees. A touch inside the center disc returns :dead. Near the middle, an angle would swing through a whole turn over a few pixels, so skip :dead in your handler.

An angle has a seam. Dragging clockwise past 12 o'clock takes 359° straight to 0°, and the ring would empty in one frame. follow/2 reads a jump of more than half a turn as crossing the seam and pins the value to the end the finger was heading for. A full ring stays full until you drag back the other way.

The screen owns the state. Assign the angle in handle_info/2 and the dial redraws. The value prop wraps, size sets the diameter, and show_value={false} hides the center reading. point_on_dial/4 returns the point at an angle on a circle, with 0° at the top as well.

Run this from your Mob app's root to add the component to lib/<app>/components/:

mix mishka.ui.gen.mob angle_slider

The generator registers the component's tag, so you can use it in ~MOB markup. It also adds the shared Color and Event modules it uses. The examples on this page use the mishka_ prefix of the showcase app (--module-prefix mishka_), so the tag is <MishkaAngleSlider>. Without a prefix the tag is <AngleSlider>.

Ring, arc and handle are drawn on a canvas, and you drag them directly: touch anywhere on the ring and the handle follows your finger. angle_at/3 turns the touch position into degrees and returns :dead near the center, so the handler skips that case. The label caption and the 45° text under the dial in the screenshot come from the showcase page.

Angle slider dial

LTR RTL

Preview

Show the whole example Show less

<MishkaAngleSlider value={@angle} on_change={:angle} />

# The ring is the control, so the event carries a touch POSITION.
# :dead means the finger was near the centre, where no angle was meant.
def handle_info({:drag, :angle, %{x: x, y: y}}, socket) do
  case MishkaAngleSlider.angle_at(x, y) do
    :dead -> {:noreply, socket}
    deg -> {:noreply, Mob.Socket.assign(socket, :angle, deg)}
  end
end

The component has no step prop. Snap the value in the screen, where it settles. This handler passes the angle to MishkaSlider.snap/2 with step: 15 and max: 360. Give angle_at/3 the same size you gave the dial.

Angle slider snapped to 15°

LTR RTL

Preview

Show the whole example Show less

# The ring is the control, so the event carries a touch POSITION.
# angle_at/3 inverts it; :dead means the finger was near the centre,
# where no angle was meant.
def handle_info({:drag, :angle, %{x: x, y: y}}, socket) do
  case MishkaAngleSlider.angle_at(x, y, 130) do
    :dead -> {:noreply, socket}
    deg -> {:noreply, assign(socket, :angle, MishkaSlider.snap(deg, step: 15, max: 360))}
  end
end

The module exports four helpers. Call them from your screen.

Your screen receives {:drag, tag, %{x:, y:, phase:}} in handle_info/2 when the user touches or drags the ring. The payload holds a touch position, so use angle_at/3 to get an angle. The phase field reports began on touch-down, dragging while the finger moves and ended on release.

def handle_info({:drag, :angle, %{x: x, y: y}}, socket) do
  next = MishkaAngleSlider.follow(socket.assigns.angle, MishkaAngleSlider.angle_at(x, y, 160))

  {:noreply, Mob.Socket.assign(socket, :angle, next)}
end

def handle_info(_msg, socket), do: {:noreply, socket}

The Mob version leaves these parts of the web slider out:

• step (keyboard nudging) is not ported. Snap in the screen with MishkaSlider.snap/2, as in the second example.
• disabled is not ported.
• name and form are not ported. The id prop is a native test tag, not a DOM id.

• Headless Angle Slider, the web component this one ports.
• Mob Hue Slider, the strip that picks a hue.
• Mob Alpha Slider, an opacity track drawn over a checkerboard.
• Mob components, the full list of native components.