Three.js and html slider

Question

I've got a problem with mixing Three.js and a HTML slider. The slider is displaying but I cannot move it. When I try to change the value by dragging, nothings happens (only camera moves).

Three.js container:

<div id="container"></div>

Slider:

<div id="zoom"><input id="setZoom" type="range" min="1" max="9000" step="1" value="100" data-orientation="vertical"></div>

Answer 1

As you say that your camera is moving when you're trying to change the position of the slider, I dare to assume that you use THREE.OrbitControls() .

The solution of such situation can be adding renderer.domElement as the second parameter when you create object of controls, like:

var controls = new THREE.OrbitControls(camera, renderer.domElement);

jsfiddle example