Question

我有这个jsfiddle我做了http://jsfiddle.net/yd6xmtvq/，并希望在html页面上实现它。我在html中包含了bootstrap的css文件，它们与html文件位于同一目录中。这就是我的代码设置方式：

  <html>

<head>

    <!-- Bootstrap Core CSS -->
 <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

 <link href="bootstrap-slider.css" rel="stylesheet">
<script src="bootstrap-slider.js"></script>


<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>

<script>

var minSliderValue = $("#ex1").data("slider-min");
var maxSliderValue = $("#ex1").data("slider-max");

$('#ex1').slider({
    value : 0,
    formatter: function(value) {
        return 'RAM: ' + value + 'GB';
    }
});

$('#ex2').slider({
    value : 0,
    formatter: function(value) {
        return 'Disk Space: ' + value + 'GB';
    }
});

$('#ex3').slider({
    value : 0,
    formatter: function(value) {
        return 'CPU : ' + value + ' Cores';
    }
});

// If You want to change input text using slider handler
$('.slider').on('slide', function(slider){

  var val1 = $("#ex1").val();
  var val2 = $("#ex2").val();
  var val3 = $("#ex3").val();
  $("#inputValue").val(parseInt(val1)+ parseInt(val2)+ parseInt(val3));

});

// If you want to change slider using input text
$("#inputValue").on("keyup", function() {
    var val = Math.abs(parseInt(this.value, 10) || minSliderValue);
    this.value = val > maxSliderValue ? maxSliderValue : val;
    $('#ex1','ex2','ex3').slider('setValue', val);
});


</script>


</head>
<body>


<div class="wrapper">
  <input class="slider" id="ex1" data-slider-id='ex1Slider' type="text" data-slider-min="0" data-slider-max="10" data-slider-step="1" />
      <hr />

  <input class="slider" id="ex2" data-slider-id='ex1Slider2' type="text" data-slider-min="0" data-slider-max="100" data-slider-step="10" />
       <hr />
      <input  class="slider" id="ex3" data-slider-id='ex1Slider3' type="text" data-slider-min="0" data-slider-max="4" data-slider-step="1" />

       <hr />

      <input type="text" class="form-control" id="inputValue" value="0" readonly />


      </div>
</body>
</html>

感谢任何帮助

Answer 1

你必须纠正以下三件事。

您在jQuery之后添加了bootstrap-slider.js。 JQuery应该是在bootstrap-slider.js库之前添加。
你有<head>标签内的脚本应该是所有html元素，否则应附在$(document).ready。
您还错过了一个次要的CSS样式，包括.wrapper { }

工作副本：

＆＃13;

<html>

<head>

    <!-- Bootstrap Core CSS -->
 <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

 <link href="http://seiyria.com/bootstrap-slider/css/bootstrap-slider.css" rel="stylesheet">
  
  <style>
    .wrapper {
  padding: 50px;
  margin-top: 25px;
}

  </style>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="http://seiyria.com/bootstrap-slider/js/bootstrap-slider.js"></script>




</head>
<body>


<div class="wrapper">
  <input class="slider" id="ex1" data-slider-id='ex1Slider' type="text" data-slider-min="0" data-slider-max="10" data-slider-step="1" />
      <hr />

  <input class="slider" id="ex2" data-slider-id='ex1Slider2' type="text" data-slider-min="0" data-slider-max="100" data-slider-step="10" />
       <hr />
      <input  class="slider" id="ex3" data-slider-id='ex1Slider3' type="text" data-slider-min="0" data-slider-max="4" data-slider-step="1" />

       <hr />

      <input type="text" class="form-control" id="inputValue" value="0" readonly />


      </div>
  
  <script>

var minSliderValue = $("#ex1").data("slider-min");
var maxSliderValue = $("#ex1").data("slider-max");

$('#ex1').slider({
    value : 0,
    formatter: function(value) {
        return 'RAM: ' + value + 'GB';
    }
});

$('#ex2').slider({
    value : 0,
    formatter: function(value) {
        return 'Disk Space: ' + value + 'GB';
    }
});

$('#ex3').slider({
    value : 0,
    formatter: function(value) {
        return 'CPU : ' + value + ' Cores';
    }
});

// If You want to change input text using slider handler
$('.slider').on('slide', function(slider){

  var val1 = $("#ex1").val();
  var val2 = $("#ex2").val();
  var val3 = $("#ex3").val();
  $("#inputValue").val(parseInt(val1)+ parseInt(val2)+ parseInt(val3));

});

// If you want to change slider using input text
$("#inputValue").on("keyup", function() {
    var val = Math.abs(parseInt(this.value, 10) || minSliderValue);
    this.value = val > maxSliderValue ? maxSliderValue : val;
    $('#ex1','ex2','ex3').slider('setValue', val);
});


</script>
</body>
</html>

＆＃13;

Jsfiddle演示到html页面

1 个答案: