<!doctype html>
<html lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">

    <title>PIXI Slider</title>

    <link rel="stylesheet" href="../3rdparty/highlight/styles/default.css">
    <link rel="stylesheet" href="../../css/doctest.css">

    <script src="../3rdparty/highlight/highlight.pack.js"></script>
    <script src="../../dist/iwmlib.3rdparty.js"></script>

    <script src="../../dist/iwmlib.js"></script>
    <script src="../../dist/iwmlib.pixi.js"></script>
</head>
<body onload="Doctest.run()">
    <h1>Slider</h1>
    <p>A slider is used whenever a numeric value within a certain range is to be obtained.</p>
    <p>The <strong>advantage</strong> of a slider over text input is that it becomes impossible
        for the user to enter a bad value. Any value that they can pick with the slider is valid.</p>
    <p>Let's look at some slider examples:</p><br />
    <canvas id="canvas" class="interactive"></canvas>
    <p>
        What you should see: Many sliders with very different styling and behaviour.
    </p>
    <script class="doctest">
const app = new PIXIApp({
    view: canvas,
    width: 900,
    height: 450,
    transparent: false
}).setup().run()

let slider1 = new Slider({
    x: 10,
    y: 20
})

let slider2 = new Slider({
    x: 10,
    y: 70,
    value: 85,
    tooltip: 'Start value 85',
    container: app.view
})

let slider3 = new Slider({
    x: 10,
    y: 120,
    min: -1000,
    max: 2000,
    value: 300,
    disabled: true
})

let slider4 = new Slider({
    x: 10,
    y: 170,
    value: -20,
    width: 600,
    height: 8,
    fill: 0xda3031,
    stroke: 0xf9bc2e,
    strokeWidth: 2,
    controlStrokeWidth: 4,
    controlRadius: 24,
    theme: 'red',
    tooltip: 'Range: 0 - 100',
    onStart: (event, slider) => {
        console.log('Started', event)
    },
    onUpdate: (event, slider) => {
        slider.tooltip.content = slider.value
    },
    onComplete: function(event) {
        console.log('Completed', this)
    }
})

let button1 = new Button({
    x: 10,
    y: 240,
    label: 'Toggle-slider-button',
    type: 'checkbox',
    active: true,
    action: e => {
        slider5.visible = !slider5.visible
    }
})

let slider5 = new Slider({
    x: 230,
    y: 250
})

app.scene.addChild(slider1, slider2, slider3, slider4)
app.scene.addChild(button1, slider5)
    </script>
</body>