JavaScript If/Else Function for Input Slider

Question

Я работаю над ползунком ввода, который использует css для значений «-» и «+», используя функцию JavaScript if/else. Однако у меня небольшая проблема с оператором if/else.

Вот скрипку http://jsfiddle.net/cn6St/ и вот код:

HTML

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

<span class="result-X">Transform-X:</span> 

<input type="range" id="sliderX" min="0" max="100" value="50" onchange="rangevalueX.value=value"/> 

<output id="rangevalueX">50</output> 

JS:

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; 
    } 
    }; 

Идея заключается в том, чтобы использовать значение "50" на ползунке как " 0 "в переводе. Если значение ползунка> 50, CSS должен преобразовать положительное значение. Если он меньше < 50, он должен быть отрицательным.

Не уверен, что я делаю неправильно здесь.

Answer 1

Вы хотите сделать:

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

Чтобы получить фактическое значение ползунка.

Answer 2

Возможно, я нашел проблему. Это был HMTL. Значение ползунка должно быть установлено на «0», а мин. должно быть «-50», а максимальное значение должно быть «50».

Заключительный рабочий код:

HTML:

 <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> 

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; 
    } 
    }; 

Работа скрипку http://jsfiddle.net/cn6St/2/