一个简单的自定义 JavaScript 滑块？

Question

我试图用我自己的资产创建一个简单的自定义 JavaScript 滑块。我已经做了很多研究，但发现要找到正确的 css/js 属性来更改以创建自定义滑块有点困难。经过一番调查，我使用 jquery ui 来实现一个。希望它对某些人有用。

Answer 1

链接指向我创建的自定义滑块。希望它对某些人有用。

https://github.com/changey/ECSlider

需要指定的js/css有以下几种

slider.js

$(document).ready(function() {

  $("#slider-background").slider({
    min: 0,
    max: 100,
    value: 0,
        range: "min",
        animate: true,
    slide: function(event, ui) {
      setValue((ui.value) / 100);
    }
  });

  var mySlider = document.createElement('value');
  $('#slider-container').append(mySlider);
  mySlider.id = "mySlider";

});


function setValue(myValue) {
    var mySlider = document.getElementById('mySlider');
    mySlider.value = myValue;
}

slider.css

#slider-container {
    width: 350px;
    height: 50px;    
    position: relative;
    margin: 0 auto;
    top: 150px;
}

#slider-background {
    position: absolute;
    left: 24px;
    margin: 0 auto;
    height:15px;
    width: 300px;
    background: url('images/background.png') no-repeat left top;
}

#slider-background .ui-slider-handle {
    width: 38px;
    height:39px;
    background: url('images/pikachu.png') no-repeat left top;
    position: absolute;
    margin-left: -15px;
    margin-top: -8px;
    cursor: pointer;
    outline: none;
}