1

这是我的范围滑块：JS Bin

HTML：

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

JS：

var items =[ 'student','bachelor','masterstudent',' PHD'];
var s = $("#slider");

s.slider({
  min:1,
  max:items.length
});

var oneBig = 100 / (items.length - 1);

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

CSS：

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

如何将此范围滑块中的标签显示为 val 输入，如JS Bin

4

1 回答 1

1 

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-04T09:11:39.050 回答