iwmlib/pixi/slider.html
2019-03-21 09:57:27 +01:00

101 lines
2.3 KiB
HTML

<!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="../3rdparty/all.js"></script>
<script src="../all.js"></script>
<script src="./all.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>