webaudio-controls

GUI parts library for Web application using WebComponents


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

Basic Usage :

Advanced Usage and Application Notes :


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>