Javascript Html 5输入类型范围已禁用

我制作了一个带有输入标记范围的菜单，但由于某些原因，当我使用一些javascript函数时，它不起作用，并且被禁用

<div class="navbarvert">
<h2><button type="button" id ="menuoff" class="btn btn-default" aria-label="Left Align">
<span  class="glyphicon glyphicon-off " aria-hidden="true"></span>
</button></h2>
       <navvert>
         <ul>  
          <li><input id="myColor" class="color {pickerFaceColor:'transparent',pickerFace:3,pickerBorder:0,pickerInsetColor:'black'}"></li>
          <li> <label for=fader>Transparency</label> <input id ="transparency" type="range" min="0" max="10" value="0" id="fader"> </li>
        </ul>
       </navvert>
 </div>

---

这里有一个活生生的例子，只有chrome，如果你右击形状，就会出现一个左菜单，正如你所看到的，范围输入可以工作，但是如果你选择右上角屏幕上的中间三个按钮，它就不工作了

在Firefox中还有另一个错误。错误：引用错误：单击事件时未定义该事件。检查teroso.js event.preventDefault上的行号528；Method现在在Firefox上还可以，但仍然无法正常工作

function onDocumentMouseMove( event ) {


            event.preventDefault();

        /*  mouse2D.x = ( event.clientX / window.innerWidth ) * 2 - 1;
            mouse2D.y = - ( event.clientY / window.innerHeight ) * 2 + 1;*/

            mouse2D.x = ( ( event.clientX - renderer.domElement.offsetLeft ) / renderer.domElement.width ) * 2 - 1;
            mouse2D.y = - ( ( event.clientY - renderer.domElement.offsetTop ) / renderer.domElement.height ) * 2 + 1;

            var vector = new THREE.Vector3( mouse2D.x, mouse2D.y, 0.5 );
            projector.unprojectVector( vector, camera );

            var raycaster = new THREE.Raycaster( camera.position, vector.sub( camera.position ).normalize() );


            if ( SELECTED ) {

                var intersects = raycaster.intersectObject( plane );

                SELECTED.position.copy( intersects[ 0 ].point.sub( offset ) );






                                    render();
                return;

            }

            var intersects = raycaster.intersectObjects( geometryContainer);

            if ( intersects.length > 0 ) {

                if ( INTERSECTED != intersects[ 0 ].object ) {

                    if ( INTERSECTED ) INTERSECTED.material.color.setHex( INTERSECTED.currentHex );

                    INTERSECTED = intersects[ 0 ].object;
                    INTERSECTED.currentHex = INTERSECTED.material.color.getHex();

                    plane.position.copy( INTERSECTED.position );

                    plane.lookAt( camera.position );
render();
                }

                //container.style.cursor = 'pointer';

            } else {

                if ( INTERSECTED ) INTERSECTED.material.color.setHex( INTERSECTED.currentHex );

                INTERSECTED = null;

                container.style.cursor = 'auto';

            }


        }




                    function onDocumentMouseDown( event ) {


            event.preventDefault();

            var vector = new THREE.Vector3( mouse2D.x, mouse2D.y, 0.5 );
            projector.unprojectVector( vector, camera );

            var raycaster = new THREE.Raycaster( camera.position, vector.sub( camera.position ).normalize() );

            var intersects = raycaster.intersectObjects( geometryContainer );

            if ( intersects.length > 0 ) {


controls.noRotate=true;
                SELECTED = intersects[ 0 ].object;

                var intersects = raycaster.intersectObject( plane );
                offset.copy( intersects[ 0 ].point ).sub( plane.position );

                //container.style.cursor = 'move';


            }

        }



        function onDocumentMouseUp( event ) {


            event.preventDefault();
controls.noRotate=false;
            controls.enabled = true;

            if ( INTERSECTED ) {

                plane.position.copy( INTERSECTED.position );

                SELECTED = null;


            }


        controls.noRotate=true;
            container.style.cursor = 'auto';

        }