melonJS
    Preparing search index...

    Interface UISliderSettings

    The settings UISlider takes. All are optional.

    The colour settings are for the drawn look and are ignored when a skin is given.

    interface UISliderSettings {
        enabled?: boolean;
        fillColor?: Paint;
        font?: string;
        fontSize?: number;
        hoverScale?: number;
        label?: string;
        labelFillStyle?: string;
        length?: number;
        max?: number;
        min?: number;
        onChange?: (value: number, slider: UISlider) => void;
        onChangeEnd?: (value: number, slider: UISlider) => void;
        orientation?: "vertical" | "horizontal";
        pressScale?: number;
        showValue?: boolean;
        skin?: UISliderSkin;
        step?: number;
        thumbBorderColor?: Paint;
        thumbBorderWidth?: number;
        thumbColor?: Paint;
        thumbHoverColor?: Paint;
        thumbSize?: number;
        trackColor?: Paint;
        trackThickness?: number;
        value?: number;
        valueFormat?: (value: number, ratio: number) => string;
    }

    Hierarchy (View Summary)

    Index
    enabled? fillColor? font? fontSize? hoverScale? label? labelFillStyle? length? max? min? onChange? onChangeEnd? orientation? pressScale? showValue? skin? step? thumbBorderColor? thumbBorderWidth? thumbColor? thumbHoverColor? thumbSize? trackColor? trackThickness? value? valueFormat?
    enabled?: boolean

    whether it answers input; a disabled slider is drawn at half opacity

    true
    fillColor?: Paint

    the part of the track from the low end to the thumb (drawn look)

    "#2a7de1"
    font?: string

    a CSS font family, or the name of a loaded bitmap font

    "sans-serif"
    fontSize?: number

    the text height of the caption and the value, in pixels

    16
    hoverScale?: number

    The scale the widget is drawn at under the pointer, or while it has the keyboard and gamepad focus, such as 1.05. 1 turns it off.

    1
    label?: string

    a caption drawn above the track: at the left on a horizontal slider, centred on a vertical one

    labelFillStyle?: string

    the colour of the caption and the value

    "#000000"
    length?: number

    the length of the track, in pixels: its width on a horizontal slider, its height on a vertical one

    200
    max?: number

    the highest value

    1
    min?: number

    the lowest value; min and max are swapped if given the wrong way round

    0
    onChange?: (value: number, slider: UISlider) => void

    Called with the new value on every change the user makes, while dragging too. Never called when value is set from code. See UISlider#onChange.

    onChangeEnd?: (value: number, slider: UISlider) => void

    Called with the final value once the user lets go, and after each wheel or key step. Never called when value is set from code. See UISlider#onChangeEnd.

    orientation?: "vertical" | "horizontal"

    which way it slides; a vertical slider has its highest value at the top. Fixed once built.

    "horizontal"
    pressScale?: number

    The scale the widget is drawn at while held down, such as 0.92. 1 turns it off.

    1
    showValue?: boolean

    show the value as text: at the right end of the caption row on a horizontal slider, below the track on a vertical one

    false
    skin?: UISliderSkin

    draw it from atlas regions instead of the drawn look

    step?: number

    the interval values snap to, counted from min; 0 for no snapping

    0
    thumbBorderColor?: Paint

    the thumb's outline (drawn look)

    "#2a7de1"
    thumbBorderWidth?: number

    the thickness of the thumb's outline, in pixels (drawn look); 0 for none

    2
    thumbColor?: Paint

    the thumb (drawn look)

    "#ffffff"
    thumbHoverColor?: Paint

    the thumb under the pointer or while dragged (drawn look)

    "#e4eefb"
    thumbSize?: number

    the diameter of the round thumb, in pixels (drawn look; a skin's thumb keeps its region's size)

    20
    trackColor?: Paint

    the track (drawn look)

    "#00000033"
    trackThickness?: number

    the thickness of the track, in pixels; with a skin, the track region's thickness by default

    6
    value?: number

    the starting value, snapped to step and clamped to the range; min by default

    valueFormat?: (value: number, ratio: number) => string

    How the value text is written, given the value and the ratio (where the value is between min and max, 0 to 1). By default, the value with as many decimals as step has, or 2 decimals with no step.

    valueFormat: (value, ratio) => `${Math.round(ratio * 100)}%`

    Settings
    Member Visibility

    On This Page
    Properties