使用HTML滑塊以更改

Question

我

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

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

.slider { 
 
\t \t  -webkit-appearance: none; /* Override default CSS styles */ 
 
\t \t  appearance: none; 
 
\t \t  width: 100%; /* Full-width */ 
 
\t \t  height: 25px; /* Specified height */ 
 
\t \t  background: #ffffff; /* Grey background */ 
 
\t \t  outline: none; /* Remove outline */ 
 
\t \t  opacity: 0.7; /* Set transparency (for mouse-over effects on hover) */ 
 
\t \t  -webkit-transition: .2s; /* 0.2 seconds transition on hover */ 
 
\t \t  transition: opacity .2s; 
 
\t \t } 
 

 
\t \t /* Mouse-over effects */ 
 
\t \t .slider:hover { 
 
\t \t  opacity: 1; /* Fully shown on mouse-over */ 
 
\t \t } 
 

 
\t \t /* The slider handle (use webkit (Chrome, Opera, Safari, Edge) and moz (Firefox) to override default look) */ 
 
\t \t .slider::-webkit-slider-thumb { 
 
\t \t  -webkit-appearance: none; /* Override default look */ 
 
\t \t  appearance: none; 
 
\t \t  width: 25px; /* Set a specific slider handle width */ 
 
\t \t  height: 25px; /* Slider handle height */ 
 
\t \t  background: #4CAF50; /* Green background */ 
 
\t \t  cursor: pointer; /* Cursor on hover */ 
 
\t \t } 
 

 
\t \t .slider::-moz-range-thumb { 
 
\t \t  width: 25px; /* Set a specific slider handle width */ 
 
\t \t  height: 25px; /* Slider handle height */ 
 
\t \t  background: #4CAF50; /* Green background */ 
 
\t \t  cursor: pointer; /* Cursor on hover */ 
 
\t \t }

<div id="slidecontainer"> 
 
    <input type="range" min="500" max="2500" value="500" step="100" class="slider" id="myRange"> 
 
</div> 
 

 
<a href="#" class ="button style3">Go</a>

我試圖讓這個滑塊改變一個按鈕，一個鏈接一個非常基本的滑塊按鈕的鏈接，但我有不知道如何去做。我不是很擅長JavaScript，但如果你給我的想法我確定我可以管理。我的最終目標是讓此滑塊根據滑塊的位置更改按鈕內的鏈接。

Answer 1

的simpliest想法來我的心是，例如定義

var a100 = "www.cr8code.co"; 
var a200 = "www.google.com"; 

，然後讓滑塊一樣的價值;

$('.slider').change(function(){ 
var y = $('.slider').val(); 
y = 'a'+y; 
$('button').attr('href',eval(y)); 
}); 

它將GE滑塊爲〔實施例的值，如果值是100然後鏈接將是「cr8code.co」如果值200鏈接將是「google.com」 順便說一句，我想按鈕是<a>標記其他明智的，如果它是<button>邏輯是相同的，但你會改變代碼。