用于输入滑块的JavaScript If/Else函数

我正在开发一个输入滑块，它使用JavaScript if/else函数对“-”和“+”值进行css转换。不过，我对if/else语句有点问题

这是一把小提琴，这是代码：

HTML

Transform-X：
50

JS:

var sliderx=document.getElementById（“sliderx”）；
变量框=document.querySelector（'.square'）；
var rangevalueX=document.getElementById（“rangevalueX”）；
sliderx.onchange=函数（）{
如果（rangevalueX>'50'）{
box.style.webkitttransform=“translateX（“+（sliderx.value）+”px）”；
rangevalueX.value=滑块x.value；
}
否则如果（rangevalueX 50），CSS应转换为正值。如果小于，则需要执行以下操作：

var rangevalueX = document.getElementById('rangevalueX').value;

获取实际滑块值。
我似乎发现了问题。问题出在HMTL上。滑块值应设置为“0”，而
min
应为“-50”，最大值应为“50”

最终工作代码：

HTML:

Transform-X：
0

JavaScript:

var sliderx = document.getElementById("sliderX");
var box = document.querySelector('.square');
var rangevalueX = document.getElementById("rangevalueX");

sliderx.onchange = function(){

    if (rangevalueX >'50') {
    box.style.webkitTransform = "translateX(" + (sliderx.value) + 'px)';
    rangevalueX.value = sliderx.value;
    }
    else if (rangevalueX <'50') {
    box.style.webkitTransform = "translateX(-" + (sliderx.value) + 'px)';
    rangevalueX.value = sliderx.value;
    }
    };

var sliderx=document.getElementById（“sliderx”）；
变量框=document.querySelector（'.square'）；
var rangevalueX=document.getElementById（“rangevalueX”）；
sliderx.onchange=函数（）{
如果（rangevalueX>'50'）{
box.style.webkitttransform=“translateX（“+（sliderx.value）+”px）”；
rangevalueX.value=滑块x.value；
}
else if（rangevalueX）您不能使用HTML吗？
是的。这就是我尝试过的。请参阅下面我的答案。它似乎是正确的。
var rangevalueX = document.getElementById('rangevalueX').value;

<div class="square"></div>

    <div>
       <span class="result-X">Transform-X:</span>
        <input type="range" id="sliderX" min="-50" max="50" value="0" onchange="rangevalueX.value=value"/>
        <output id="rangevalueX">0</output>
    </div>

</div>

var sliderx = document.getElementById("sliderX"); var box = document.querySelector('.square'); var rangevalueX = document.getElementById("rangevalueX"); sliderx.onchange = function(){ if (rangevalueX >'50') { box.style.webkitTransform = "translateX(" + (sliderx.value) + 'px)'; rangevalueX.value = sliderx.value; } else if (rangevalueX <'50') { box.style.webkitTransform = "translateX(-" + (sliderx.value) + 'px)'; rangevalueX.value = sliderx.value; } };