A simple custom JavaScript slider?

Question

I was trying to create a simple custom JavaScript slider with my own assets. I've done quite some research but found it was a bit hard to find the correct css/js attributes to change in order to create the custom slider. After some investigations, I used jquery ui to implement one. Hopefully it's useful to some people.

Answer 1

The link is to the custom slider I created. Hopefully it's useful to some people.

https://github.com/changey/ECSlider

The js/css that needs to be specified are among the followings

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