Main Site

Slider

Object Preview
Master Volume
0 72 100
Live Usage
Audio: 72%
Brightness: 48%
Patch Speed: Variable
Developer Edition Object

The Slider object gives users a fast and intuitive way to choose a value within a fixed range inside your Custom Launcher. It is ideal for settings screens, performance tuning pages, installer style interfaces, and any launcher flow where the user needs precise control without typing values manually.

Because the Slider is visual, immediate, and easy to understand, it works brilliantly with labels, buttons, progress bars, and variable-driven logic. A well-placed Slider can make a Custom Game Launcher feel much more polished and premium.

Pro Tip

The Slider object is available in Developer Edition. It is designed for interactive value selection and works especially well when paired with variables, labels, progress bars, and conditional event logic.

Slider Overview

The Slider object is a horizontal control made up of a track, a filled value section, and a draggable thumb. As the user drags the thumb, the current value changes within the defined minimum and maximum range using the step amount you specify.

This makes the Slider perfect for anything that feels more natural as a gradual setting rather than an on or off switch. Instead of asking the user to type a value, the launcher lets them simply drag until it feels right. Much cleaner. Much less chaos.

Typical Uses

  • Volume controls for music, sound effects, or voice chat
  • Brightness or gamma settings for supported launch flows
  • Memory allocation style controls for advanced tools
  • Download speed or patching preference selectors
  • Launcher animation intensity or UI scale options
  • Difficulty, sensitivity, or gameplay preset selection when preparing launch arguments

Default Settings

When added to the page, the Slider starts with a sensible default configuration that is ready to style and wire into your event logic.

Property Default Value
Min Value 0
Max Value 100
Step 1
Default Value 50
Track Color #333333
Fill Color #1e88e5
Thumb Color #ffffff
Thumb Size 20
Track Height 8
Track Radius 100

Properties

You can shape the Slider visually and functionally to match almost any launcher page design.

Range and Value

  • Default Value: The value the Slider starts with when the launcher opens.
  • Min Value: The lowest value the user can select.
  • Max Value: The highest value the user can select.
  • Step: The increment used when the value changes. Great for fine control or chunked presets.

Styling

  • Track Color: The base background color of the Slider track.
  • Fill Color: The active filled portion that visually represents the current value.
  • Thumb Color: The draggable knob color.
  • Thumb Size: Controls the diameter of the thumb.
  • Track Height: Defines how thick the Slider appears.
  • Track Radius: Adjusts how rounded the ends of the track are.

Placement and Display

  • Width and Height: Controls the amount of space the Slider occupies on the page.
  • Opacity: Lets you soften the object visually for subtle UI layouts.
  • Layer: Determines which objects appear in front or behind.
  • Hide At Start: Allows the Slider to be revealed later through event logic.

Slider Events

The Slider object provides two dedicated events. Together they give you both real-time feedback and final value confirmation.

On Value Change

Fires while the Slider value is actively changing during dragging. This is the event to use when you want immediate live feedback, such as updating a value label, previewing a brightness level, or resizing a visual element as the user moves the control.

On Value Set

Fires when the user releases the Slider and the final value is committed. This is ideal for saving settings, writing values to a file, or applying logic only after the user has finished adjusting the control.

All Possible Actions for the Slider

The Slider works with both value-based actions and general object actions. That means it can act as an input source, a visual control, or a fully dynamic object manipulated by your launcher logic.

Action How it applies to Slider
Push to Variable Reads the Slider value and stores it in a variable for later use.
Set Object Property from Variable Lets a variable update a Slider property such as its current value.
Show Objects Reveal the Slider only when needed, such as advanced settings pages.
Hide Objects Hide the Slider when a feature is not relevant to the current page state.
Move Object Reposition the Slider dynamically on the page.
Resize Object Change the Slider dimensions to suit different layouts or responsive page states.
Set Object Layer Adjust stacking order if the Slider needs to sit above or below other interface objects.
Destroy Object Remove the Slider completely at runtime if it is no longer needed.

Building Logic with the Slider

The Slider becomes especially powerful when combined with variables and other interface objects. A Slider on its own selects a number. A Slider with logic becomes a control system.

Using the Slider Standalone

Used by itself, the Slider can simply collect a value and save it when the user finishes dragging. This is perfect for preference screens where you only need a clean input method.

Using the Slider with Other Objects

The Slider pairs naturally with:

  • Text Labels: show the current numeric value beside the control
  • Buttons: apply or confirm the chosen value when clicked
  • Progress Bars: mirror the Slider visually for a more dramatic interface effect
  • Checkboxes and Toggle Buttons: show or hide advanced Sliders only when an option is enabled

That means you can create UI that feels responsive and alive rather than static. Not bad for a humble line and knob combo.

Example 1: Live Volume Control Display

Use a Slider to control a visible volume setting inside your launcher settings page.

  1. Place a Slider object on the page and set its range from 0 to 100.
  2. Add a nearby Text Label to show the current percentage.
  3. On the Slider's On Value Change event, use Push to Variable to store the Slider value in a variable such as varVolume.
  4. Then use Set Object Property from Variable to update the label text with varVolume.
  5. On On Value Set, save the final value to file so it persists for the next launcher session.

Example 2: Brightness Preset with Conditional UI

Create an advanced graphics section where a Slider only appears when the user enables custom brightness control.

  1. Add a Checkbox or Toggle Button called something like Enable Custom Brightness.
  2. Set the Slider to Hide At Start.
  3. When the toggle is enabled, use Show Objects to reveal the Slider.
  4. On the Slider's On Value Change event, push its value into varBrightness.
  5. Use that variable to update a value label and a matching Progress Bar for a richer visual preview.
  6. On On Value Set, write varBrightness to your chosen settings file or configuration variable.

Custom CSS Example

For Developer Edition users, the Slider can be heavily restyled with Custom CSS. This is ideal when you want to match a futuristic launcher theme, create glows, sharpen the thumb style, or change the visual feel of the active track.

Important Notice

In Developer Edition, always use !important in your Custom CSS rules so your styles override the default object styling correctly. You do not need to scope the object manually.

Custom CSS Preview
Low 64 High

Pro Tip

This live preview is only demonstrating a visual style. In Developer Edition, your Custom CSS can be used to completely reshape the feel of the Slider so it matches your launcher branding.

css

/* Developer Edition Custom CSS Example for Slider */
/* No manual object scoping needed */
height: 12px !important;
background: linear-gradient(90deg, rgba(37,99,235,0.95), rgba(96,165,250,0.95)) !important;
border-radius: 999px !important;
border: 1px solid rgba(96,165,250,0.35) !important;
box-shadow: 0 0 16px rgba(59,130,246,0.35), inset 0 0 10px rgba(255,255,255,0.06) !important;
/* Thumb styling */
width: 24px !important;
height: 24px !important;
border-radius: 50% !important;
background: #ffffff !important;
border: 2px solid #60a5fa !important;
box-shadow: 0 0 0 6px rgba(59,130,246,0.18), 0 0 20px rgba(59,130,246,0.45) !important;
transition: transform 0.18s ease, box-shadow 0.18s ease !important;
/* Hover and active feel */
transform: scale(1.08) !important;

Best Practices

Use sensible ranges

Choose a minimum, maximum, and step size that make sense for the feature being controlled. A bad step value can make a good Slider feel clunky very quickly.

Show the value clearly

When possible, pair the Slider with a visible label or readout. Users should not have to guess whether they picked 50 or 57. Guesswork is for game bosses, not settings menus.

Use the right event for the job

Use On Value Change for live previews and On Value Set for final save or apply actions.

Summary

The Slider object is one of the most useful controls for building rich, interactive settings inside a Custom Launcher. It gives users an intuitive way to select a value, while giving you the flexibility to drive labels, variables, file saving, and other interface objects through clean event logic.

When combined with Developer Edition features and thoughtful styling, the Slider can become a polished, premium part of your Custom Game Launcher interface.