app.js

// Init all the sliders
qsa('.js-slider').forEach(el => new Slider(el))

GlobalMouse.js

import store from '../store'
import Events from './Events'

const { flags } = store
const { isDevice } = flags

export default new (class {
  constructor() {
    this.on = 0
    this.off = 0
    this.events = {
      move: isDevice ? 'touchmove' : 'mousemove',
      down: isDevice ? 'touchstart' : 'mousedown',
      up: isDevice ? 'touchend' : 'mouseup',
    }
    this.addEvents()
  }

  addEvents() {
    const { move, down, up } = this.events
    window.addEventListener(move, this.onMove, { passive: false })
    window.addEventListener(down, this.onDown, { passive: false })
    window.addEventListener(up, this.onUp, { passive: false })
  }

  getPos(e) {
    const x = e.changedTouches ? e.changedTouches[0].clientX : e.clientX
    const y = e.changedTouches ? e.changedTouches[0].clientY : e.clientY
    const target = e.target

    return {
      x, y, target,
    }
  }

  onMove = (e) => {
    const { x, y, target } = this.getPos(e)
    Events.emit('mousemove', {
      x, y, target, e,
    })
  }

  onDown = (e) => {
    const { x, y, target } = this.getPos(e)
    this.on = x
    Events.emit('mousedown', {
      x, y, target,
    })
  }

  onUp = (e) => {
    const { x, target } = this.getPos(e)
    this.off = x
    const click = Math.abs(this.off - this.on) < 10
    Events.emit('mouseup', {
      x, target, click,
    })
  }
})()

GlObject.js

  init() {
   this.x = 0 
  }

  updateX(x = 0) {
    const pos = x + this.x // this.x is the value from the slider, which is added onto the regular x value
    const { left } = this.bounds
​
    this.position.x = -(this.camUnit.width / 2) + (this.scale.x / 2);
    this.position.x += ((left + pos) / store.bounds.ww) * this.camUnit.width;
  }

slider.js

export default class {

  constructor(el // slider like .js-slider-n) {
    this.el = el
    this.planes = gl.scene.children.filter(plane => this.el.contains(plane.el)

    this.target = 0
    this.current = 0
    this.ease = 0.1
    this.on = 0
    this.speed = 2

    this.dragging = false
    this.resizing = false
    
    this.cancel = {
      x: 0,
      y: 0
    }

    Events.on('tick', this.run)
    Events.on('mousemove', this.move)
    Events.on('mousedown', this.down)
    Events.on('mouseup', this.up)
  }

  run = () => {
    const diff = this.target - this.current
    if (!this.dragging && (Math.abs(diff) <= 0.001)) return

    this.current += diff * this.ease
    this.rounded = Math.round(this.current * 100) / 100

   !this.resizing && this.planes.forEach(plane => {
      plane.x = this.current
    })
  }

  down = ({ x, y, target }) => {
    if (target !== this.el && !target.contains(this.el)) return
    
    this.dragging = true
    this.cancel.x = x
    this.cancel.y = y
    this.on = this.target + x * this.speed
  }

  move = ({ x, y, e }) => {
    if (!this.dragging) return
 
    if (
      (Math.abs(x - this.cancel.x) > Math.abs(y - this.cancel.y)) 
      && e.cancelable
    ) {
      e.preventDefault()
      e.stopPropagation()
    }

    this.target = this.on - x * this.speed
    this.clamp()
  }

  up = () => {
    this.dragging = false
  }
}