라디오 버튼에서 슬라이더 선택 만들기

Question

라디오 버튼이 있습니다. 나는 웹에 대한 연구를 많이 수행하고

w3schools

에 JS 슬라이더를 발견

<div> 
<input type="radio" name="ticket" value="Standard"> Standard 
<input type="radio" name="ticket" value="Express"> Express 
<input type="radio" name="ticket" value="Priority"> Priority 
<input type="radio" name="ticket" value="Overnight"> Overnight 
</div> 

내가 좋아하는 JavaScript.Somewhat를 사용하여 슬라이더의 선택으로 변환하려면,

그러나 선택 (중단 점) 옵션을 제공하지 않습니다.

또한, 나는

<input type="range" id="myRange" value="90"> 

겪었지만 나는 단지 몇 값이 완료되지 슬라이더를이 범위를 달성 할 수있는 방법을 모르고.

Answer 1

로 W3 학교의 범위를 같은 예를 형식에 설정을 몇 수 있습니다, 당신은 몇 가지 자바 스크립트와 CSS와 비슷한 효과를 만들 수 있습니다. 나는 당신의 질문에있는 사진과 비슷하게 보이게하려고 표식을 붙였다.

var slider = document.getElementById("myRange"); 
 
var output = document.getElementById("shipping"); 
 
output.innerHTML = slider.value; // Display the default slider value 
 

 
var labels = ['Standard', 'Express', 'Priority', 'Overnight']; 
 

 
slider.value = 0; 
 
sliderInputChange(); 
 

 
// Update the current slider value (each time you drag the slider handle) 
 
slider.oninput = sliderInputChange; 
 

 
function sliderInputChange() { 
 
    var val = slider.value; 
 
    var unit = 12.5; 
 
    var optionNum; 
 

 
    if (val <= 25) { 
 
    slider.value = unit; 
 
    optionNum = 1; 
 
    } else if (val <= 50) { 
 
    slider.value = 25 + unit; 
 
    optionNum = 2; 
 
    } else if (val <= 75) { 
 
    slider.value = 50 + unit; 
 
    optionNum = 3; 
 
    } else { 
 
    slider.value = 75 + unit; 
 
    optionNum = 4; 
 
    } 
 
    output.innerHTML = 'Shipping: ' + labels[optionNum - 1]; 
 
}

@import url('https://fonts.google.com/?query=lato&selection.family=Lato:300'); 
 

 
body { 
 
    margin-left: 0; 
 
    margin-right: 0; 
 
    text-align: center; 
 
} 
 

 
.slider { 
 
    -webkit-appearance: none; 
 
    appearance: none; 
 
    height: 2px; 
 
    background: black; 
 
    outline: none; 
 
    width: 100%; 
 
    margin-left: 0; 
 
    margin-right: 0; 
 
} 
 

 
.mark { 
 
    width: 2px; 
 
    height: 30px; 
 
    background-color: #aaa; 
 
    position: fixed; 
 
    top: 6px; 
 
    z-index: -1; 
 
} 
 

 
.mark1 { 
 
    left: 13%; 
 
} 
 

 
.mark2 { 
 
    left: 38%; 
 
} 
 

 
.mark3 { 
 
    right: 13%; 
 
} 
 

 
.mark4 { 
 
    right: 38%; 
 
} 
 

 

 
/* The slider handle (use webkit (Chrome, Opera, Safari, Edge) and moz (Firefox) to override default look) */ 
 

 
.slider::-webkit-slider-thumb { 
 
    -webkit-appearance: none; 
 
    appearance: none; 
 
    width: 15px; 
 
    height: 15px; 
 
    background: black; 
 
    cursor: pointer; 
 
    border-radius: 50%; 
 
    margin: 0; 
 
} 
 

 
.slider::-webkit-slider-thumb, 
 
.slider::-moz-range-thumb { 
 
    width: 15px; 
 
    height: 15px; 
 
    background: black; 
 
    cursor: pointer; 
 
    border-radius: 50%; 
 
    margin: 0; 
 
} 
 

 
#shipping { 
 
font-family: "Lato"; 
 
font-size: 2rem; 
 
font-weight: 300; 
 
}

<div class="container"> 
 
    <input type="range" min="1" max="100" value="50" class="slider" id="myRange"> 
 
    <div class="mark mark1"></div> 
 
    <div class="mark mark2"></div> 
 
    <div class="mark mark3"></div> 
 
    <div class="mark mark4"></div> 
 

 
    <p id="shipping"></p> 
 
</div>

Answer 2

당신은 절에있는 슬라이더를 나눔으로써

var steps = [ 
 
    "Standard", 
 
    "Express", 
 
    "Priority", 
 
    "Overnight" 
 
]; 
 
var slider = document.getElementById("myRange"); 
 
var output = document.getElementById("demo"); 
 
output.innerHTML = steps[slider.value]; // Display the default slider value 
 

 
// Update the current slider value (each time you drag the slider handle) 
 
slider.oninput = function() { 
 
    output.innerHTML = steps[this.value]; 
 
}

#slidecontainer { 
 
    width: 100%; 
 
} 
 

 
.slider { 
 
    -webkit-appearance: none; 
 
    width: 100%; 
 
    height: 15px; 
 
    border-radius: 5px; 
 
    background: #d3d3d3; 
 
    outline: none; 
 
    opacity: 0.7; 
 
    -webkit-transition: .2s; 
 
    transition: opacity .2s; 
 
} 
 

 
.slider:hover { 
 
    opacity: 1; 
 
} 
 

 
.slider::-webkit-slider-thumb { 
 
    -webkit-appearance: none; 
 
    appearance: none; 
 
    width: 25px; 
 
    height: 25px; 
 
    border-radius: 50%; 
 
    background: #4CAF50; 
 
    cursor: pointer; 
 
} 
 

 
.slider::-moz-range-thumb { 
 
    width: 25px; 
 
    height: 25px; 
 
    border-radius: 50%; 
 
    background: #4CAF50; 
 
    cursor: pointer; 
 
}

<div id="slidecontainer"> 
 
    <input type="range" min="0" max="3" value="3" class="slider" id="myRange"> 
 
    <p> <span id="demo"></span></p> 
 
</div>