Neon UI Controls — checkbox, toggle and slider
==============================================

Eight high-contrast neon interface controls: checkbox, radio, toggle and
slider, each with on and off states drawn as different shapes. SVG plus
transparent PNG.

The settings screen half of the Neon family. Chamfered checkboxes and a
hard-edged toggle keep the console language going into the menu, which is
where most sci-fi kits give up and fall back to a generic rounded switch.

The set covers the four controls a settings screen actually needs: a checkbox,
a radio button, a toggle switch and a slider with a separate knob. Each
stateful control ships both states as its own file, at a 28×28 base — the
toggle is 56×28 and the slider track is 224 px wide so it can be nine-sliced
to any length.

On and off are drawn as different shapes, not different colours. An unchecked
box is an empty recess; a checked one is a filled surface with a tick cut into
it. That matters because a settings screen is exactly where a player is most
likely to be running a colourblind mode, a greyscale shader, or a heavily
tinted post-process — and a state you can only read by hue disappears under
all three.

The slider ships as a track and a knob rather than a single sprite. Animating
a one-piece slider means redrawing it per value; with two pieces you stretch
the fill and move the knob, which is what every UI toolkit already expects.
The knob carries a centre notch so its rotation and position stay readable at
small sizes.

Everything is included as editable SVG and as flat transparent PNG at 1x, 2x
and 4x, drawn from the same six deep space blue tones as the rest of the Neon
family.

HOW TO USE

  - Swap the whole texture between the on and off files rather than tinting
    one sprite; the two states differ in shape, so a tint alone will not
    reproduce them.
  - The slider track is nine-sliceable with a 9 px cap on each end — stretch
    the middle and the rounded ends stay intact at any width.
  - In Unity, wire the two files to the Toggle component's Background and
    Checkmark graphics, or swap the sprite in an onValueChanged handler for a
    single-image setup.
  - Keep the knob centred on the fill edge: its width is 24 px, so offset it
    by half that from the fill's right edge to make the handle sit on the
    value rather than after it.
  - At 28 px these controls are sized for a mouse-driven console screen; for a
    gamepad menu use the 2x export and keep the hit area at least 64 px.

License: CC-BY-4.0 — see LICENSE.txt
Page: https://www.colorosse.com/assets/2d/ui/neon-ui-controls
More free assets: https://www.colorosse.com
