slider {
    border_width = border_width(2.0),
    border = border(bside("#000000", "solid")),
    background_color = rgb(200, 200, 200),
    can_focus = true,

    on_init = "ui.slider#set_slider(node)",
    on_mouse_up = "ui.slider#
        node:focus()
        warp_to(node, evt)
        return true
    ",

    layout = "center",
}

slider(focused=true) {
    background_color = rgb(255, 255, 255),
    border = border(bside("#CCCC00", "solid")),
    shadow = shadow(0.0, 0.0, rgba(255, 255, 0, 0.5), 16.0, 0.0, "outset"),
}

slider > slider_value {
    layout = "lined",
    line_height = 30,
    width = parent_width,
}

slider > slider_value > @text {
    font_size = 28,
    font_color = "#444440",
}

slider > slider_thumb {
    align_width = false,
    width = parent_height,
    height = parent_height,
    can_hover = true,

    border_width = border_width(4.0),
    border = border(bside("#000000", "solid")),
    background_color = rgb(200, 200, 200),

    on_mouse_down = "ui.slider#
        node.parent:focus()
        start_slider(node.parent, evt)
        return true
    ",
    on_mouse_move_over = "init#
        ui.set_cursor('base:ui/cursor/interact')
    ",
    on_mouse_move_out = "init#
        ui.set_cursor('base:ui/cursor/normal')
    ",
}

slider > slider_thumb(offset=x) {
    x = float(parent_width - parent_height) * x,
}

slider > slider_thumb(hover=true) {
    border = border(bside("#AA0000", "solid")),
    background_color = rgb(255, 255, 255),
}

slider_catcher {
    width = parent_width,
    height = parent_height,

    can_hover = true,

    on_mouse_up = "ui.slider#
        close_slider()
        return true
    ",
    on_mouse_down = "ui.slider#return true",
    on_mouse_move = "ui.slider#
        warp_to(node:get_property_table('$slider').slider, evt)
        return true
    ",
    on_mouse_move_over = "ui.slider#return true",
    on_mouse_move_out = "ui.slider#return true",
    on_mouse_scroll = "ui.slider#return true",
}