顯示範圍滑塊值VAL輸入（項目範圍滑塊）（解決）

這個問題，更新爲真正的答案（感謝@siva）顯示範圍滑塊值VAL輸入（項目範圍滑塊）（解決）

這是展示項目的範圍內VAL輸入片斷
DEMO：JS Bin

HTML：

<div id="slider"></div> 
<input id="legend">

JS：

var items =[ 'student','bachelor','masterstudent',' PHD']; 

var s = $("#slider"); 
s.slider({ 
range: true, 
min:1, 
max:items.length, 
values: [ 2, 3 ], 
slide: function(event, ui) { 
var curr_val = ui.values[ 0 ]-1; 
var prev_val = ui.values[ 1 ]-1; 
$("#legend").val(" since " + items[curr_val] + " to " + items[prev_val]); 

} 
}); 

$("#legend").val(" since " + items[1] + " to " + items[2]);

來源

2015-05-30 fraweb

出什麼把你想要exactely，因爲只有在你的代碼串 – Zl3n

我想展示裏面輸入值。當滑動到第二項時，單身漢出現在輸入中作爲val。像http://jsbin.com/qibiyakaqi/1/edit?html,js,output – fraweb

@fraweb（http://ionden.com/a/plugins/ion.rangeSlider/demo_interactions.html）檢查此鏈接..和見range_45 – Gayathri

var items =[ 'student','bachelor','masterstudent',' PHD']; 
 

 
var s = $("#slider"); 
 
var oneBig = 100/(items.length - 1); 
 
s.slider({ 
 
    min:1, 
 
    max:items.length, 
 
    slide: function(event, ui) { 
 
    var curr_val = ui.value - 1; 
 
    $("#legend input").val(''); 
 
    $("#legend #input"+curr_val).val(items[curr_val]); 
 
    } 
 
}); 
 

 
$.each(items, function(key,value){ 
 
    var w = oneBig; 
 
    if(key === 0 || key === items.length-1) 
 
    w = oneBig/2; 
 
    $("#legend").append("<input id='input"+key+"' style='width: "+w+"%' />"); 
 
}); 
 
$("#legend #input0").val(items[0]);

label{ 
 
    display: inline-block; 
 
    text-align:center; 
 
} 
 
label:first-child{ 
 
    text-align:left; 
 
} 
 
label:last-child{ 
 
    text-align:right; 
 
}

<!DOCTYPE html> 
 
<html> 
 
    <head> 
 
    <link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1/themes/smoothness/jquery-ui.min.css" rel="stylesheet" type="text/css" /> 
 
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script> 
 
    <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1/jquery-ui.min.js"></script> 
 
    <meta charset=utf-8 /> 
 
    <title>JS Bin</title> 
 
    </head> 
 
    <body> 
 
    <div id="slider"></div> 
 
    <div id="legend"></div> 
 
    </body> 
 
</html>

來源

2015-06-04 09:11:39

顯示範圍滑塊值VAL輸入（項目範圍滑塊）（解決）

回答

相關問題