Alpha slider

The alpha slider draws two layers on one canvas. A checkerboard of squares sits at the back, and your base color is drawn over it as bands whose opacity climbs from left to right. The canvas composites the layers, so the squares show through the translucent end of the track. A marker shows the current opacity.

The track 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 alpha_at/2 converts that position to an opacity from 0 to 100. Without on_change, the track only displays the opacity.

The screen owns the state. The slider draws the value you pass (clamped to 0 to 100), so you assign the new opacity in handle_info/2. The color prop takes a hex string such as #3b82f6 or #f00. Text that does not parse as a color falls back to black. Set label and show_value for a caption and a readout such as 60%.

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

mix mishka.ui.gen.mob alpha_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 <MishkaAlphaSlider>. Without a prefix the tag is <AlphaSlider>.

The canvas draws the checkerboard and the color together, so the squares show through the translucent end of the track. This example sets show_value and converts the touch position with alpha_at/2.

Alpha slider with real transparency

LTR RTL

Preview

Show the whole example Show less

<MishkaAlphaSlider
  value={@alpha}
  color={"#3b82f6"}
  show_value={true}
  on_change={:alpha}
/>

# The track IS the control, so the event carries a touch POSITION, not a
# value. alpha_at/2 inverts the marker.
def handle_info({:drag, :alpha, %{x: x}}, socket) do
  {:noreply, Mob.Socket.assign(socket, :alpha, MishkaAlphaSlider.alpha_at(x))}
end

The track fades in whichever base color you pass, such as #dc2626. When you leave out on_change, as in the code below, the track only displays the current opacity and touching it does nothing.

Alpha slider with any base color

LTR RTL

Preview

Show the whole example Show less

# No on_change: a read-only swatch of the current opacity. Touching it
# does nothing, which is the point here.
<MishkaAlphaSlider value={@alpha} color={"#dc2626"} />

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

Your screen receives {:drag, tag, %{x:, y:, dx:, dy:, phase:}} in handle_info/2 when the user touches or drags the track. The payload holds a touch position, so use alpha_at/2 to get an opacity. The phase field reports began on touch-down, dragging while the finger moves and ended on release. The dx and dy fields in the payload differ between iOS and Android, so build on x and y only.

def handle_info({:drag, :alpha, %{x: x}}, socket) do
  {:noreply, Mob.Socket.assign(socket, :alpha, MishkaAlphaSlider.alpha_at(x))}
end

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

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

• The track is a canvas that composites a checkerboard and color bands, where the web version lays a transparent to color gradient over a checkerboard background image.
• on_commit is not ported, because the Mob bridge has no release event.
• step and large_step (keyboard nudging) are not ported.
• name and form are not ported. The id prop is a native test tag, not a DOM id.

• Headless Alpha Slider, the web component this one ports.
• Mob Hue Slider, the strip that picks a hue.
• Mob Color Swatch, which draws the same kind of checkerboard behind a translucent color.
• Mob Color Picker, a saturation and value field above a hue strip.
• Mob components, the full list of native components.