一个简单的自定义JavaScript滑块

A simple custom JavaScript slider?

本文关键字：自定义 JavaScript 滑块 简单 一个      更新时间：2023-09-26

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

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

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;
}

幻灯片.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;
}
相关文章：