synthing

a waveform sequencing synth on the web
Log | Files | Refs | Submodules

index.js (1462B)

      1 import { h, Component } from 'preact';
      2 import helpers from '../helpers';
      3 import './style.css';
      4 
      5 const mapVal = (val) => val * val;
      6 const unmapVal = (val) => Math.sqrt(val);
      7 
      8 export default class HSlider extends Component {
      9     handleUpdate = (ev) => {
     10         const minValX = this.sliderRef.offsetLeft;
     11         const maxValX = this.sliderRef.offsetLeft + this.sliderRef.offsetWidth;
     12         const width = maxValX - minValX;
     13         const offset = helpers.bounded(ev.x - minValX, 0, width);
     14         this.props.update(mapVal(offset / width));
     15 
     16     }
     17     componentDidMount() {
     18         helpers.clickNDrag(this.sliderRef, this.handleUpdate, this.handleUpdate, null);
     19     }
     20     render() {
     21         return (
     22             <div class={`HSlider${this.props.class ? ' ' + this.props.class : ''}`} ref={(ref) => {this.volRef = ref}}>
     23                 {this.props.children.length
     24                  ? this.props.children
     25                  : (<span class="icon icons-volume"></span>)
     26                 }
     27                 <div
     28                     class="hslider-triangle-container"
     29                     ref={(ref) => {this.sliderRef = ref}}
     30                 >
     31                     <div
     32                         class="hslider-triangle -foreground"
     33                         style={`transform: scale(${unmapVal(this.props.value)});`}
     34                     ></div>
     35                     <div class="hslider-triangle -background"></div>
     36                 </div>
     37             </div>
     38         );
     39 
     40     }
     41 }