<!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><a href="../index.html">lib.</a><a href="index.html">pixi.</a>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>
</html>