Question

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

Answer 1

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

需要指定的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;
}

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

1 个答案: