Polymer Web Audio Slider(Fader) Elements
Switch branches/tags
Nothing to show
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Failed to load latest commit information.
images
js
webcomponents
LICENSE
README.md
index.html

README.md

Polymer Slider Example

Live Demo

http://dl.dropboxusercontent.com/u/695740/webaudio-slider/index.html

How to use

  • load polymer.js
  • link to webaudio-knob component
<script src="[PathTo]/polymer.js">
<link rel="import" href="[PathTo]/knob.html">
  • insert webaudio-slider element
<webaudio-slider id="hoge02" class="hoge02" basesrc="images/fader-base03.jpg" knobsrc="images/fader-knob03.jpg" value="40" min="0" max="100" step="1" basewidth="76" baseheight="300" knobwidth="35" knobheight="50" ditchLength="230"></webaudio-slider>
  • create imperatively
var slider = document.createElement('webaudio-slider');
  • value can be changed by simply dragging up and down

Attributes

'min'

description: min value of the slider
default: 0

'max'

description: max value of the slider
default: 100

'value'

description: value of the slider
default: 0

'step'

description: value change steps by moving mouse
default: 1

'basewidth'

description: width of slider's baseimage
default: 0

'baseheight'

description: height of slider's baseimage
default: 0

'knobwidth'

description: width of slider's knobimage
default: 0

'knobheight'

description: height of slider's knobimage
default: 0

'ditchLength'

description: lenght of slider's dithch. Please adjust this value when the knob is pushed out from baseimage. default: 0

'basesrc'

description: path to slider's base image resource (relative from where you are refering)
default: null

'basesrc'

description: path to slider's base image resource (relative from where you are refering)
default: null

Events

'change'

description: 'change' event emitted everytime value changes

var slider = document.getElementsByTagName('[id name of your slider element]');
slider.addEventListener("change", function(){
  console.log(this.value);
});

License

The Apache License Version 2.0