一個簡單的自定義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;
}