webaudio-controls

GUI parts library for Web application using WebComponents

---

Project maintained by g200kg Hosted on GitHub Pages — Theme by mattgraham

Basic Usage :

• Overview
• Install
• How it works
• Detail&Specs
• WebAudioControlsOptions
• Creating Knob Images
• Default Styles
• Attributes Examples

Advanced Usage and Application Notes :

• Knob Samples from KnobGallery
• Working Keyboard Demo
• Determining Knob Size
• Slider tracking "rel" and "abs"
• Non-Linear Knobs / Sliders
• Multi-Touch Device Support
• MIDI Support
• Resizing After Creation

---

Slider tracking “rel” and “abs”

By default, slider tracking is set to “rel” mode.

In this mode, when you operate the slider, the drag distance determines the amount of change from the current value. Pressing and releasing without dragging does not change the current value.

If you set the “tracking” attribute to “abs”, then simply pressing or dragging anywhere in the slider will change the value to the value corresponding to that position. Fine control (Shift + drag) is ignored when “abs” mode.

---

tracking=”rel”

<webaudio-slider id="slider1" tracking="rel"
  value="50" min="0" max="100" width="400" height="32">
</webaudio-slider>
<webaudio-param link="slider1"></webaudio-param>

---

tracking=”abs”

<webaudio-slider id="slider2" tracking="abs"
  value="50" min="0" max="100" width="400" height="32">
</webaudio-slider>
<webaudio-param link="slider2"></webaudio-param>

Which of “rel” and “abs” is better depends on the case, but “abs” can be used also as changeover switches.

	Triangle
	Square
	Sawtooth
	Sine

<webaudio-slider id="slider3" tracking="abs"
 min="0" max="3" width="24" height="128">
</webaudio-slider>

---