jquery-bootstrap-slider

Bootstrap Slider

Installation

L'installation s'effectue en utilisant composer.

Ajoutez les lignes suivantes au composer.json de votre application :

"require": {
	[...]
    "twbs/bootstrap": "v3.0.0",
    "ign/bootstrap-slider-js": "1.0.*"
},

Assurez vous d'accéder au repository IGN pour pouvoir télécharger les sources des bundles IGN.

"repositories": [
    {
        "type": "composer",
        "url": "http://del-9323972.ign.fr/satis/"
    }
]

Utilisation

Pour créer un slider:

1. Dans la page html.twig

1. dans le script js :

    $('#ma_barre_de_progression').width(100); //pour une with de 100px
   
    $('#' + this.slideDiv.id).slider({
        min: 0,  //valeur min
        max: 100,  //valeur max
        value: 0  //valeur acuelle
    })
      .on('slideStop', function(ev) {  //pour ajouter un evenement lorsque le slide stope
        alert('valeur du slide:'+ ev.value);
    })
      .on('slide', function(ev) {  //pour ajouter un evenement lorsque le slide bouge
        alert('valeur du slide:'+ ev.value);
    })
      .on('slideStart', function(ev) {  //pour ajouter un evenement lorsque le slide démare
        alert('valeur du slide:'+ ev.value);
    });
   
   
   $("#ma_barre_de_progression").slider('setValue', 50);// pour placer le slider à une valeur donnée
   
   $("#ma_barre_de_progression").slider('getValue');// pour récupérer la valeur du slider