Un simple curseur JavaScript personnalisé?

Question

J'essayais de créer un simple curseur JavaScript personnalisé avec mes propres ressources. J'ai fait beaucoup de recherches mais j'ai trouvé qu'il était un peu difficile de trouver les attributs css/js corrects pour changer afin de créer le curseur personnalisé. Après quelques recherches, j'ai utilisé jquery ui pour en implémenter un. J'espère que c'est utile pour certaines personnes.

Answer 1

Le lien est au curseur personnalisé que j'ai créé. J'espère que c'est utile pour certaines personnes.

https://github.com/changey/ECSlider

Les js/css qui doit préciser sont parmi les suivants

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