<!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>