SimpleSlider, slider simpliste en Javascript

Introduction

SimpleSlider est une petite librairie qui vous permet d'ajouter simplement un slider horizontal et facilement configurable a vos pages web.

Cette librairie est distribuée sous licence BSD.

Elle est notamment utilisée pour gérer la barre de progression de notre librairie VLCcontrols.

Toutes questions ou suggestions sont les bienvenues contact@revolunet.com

Features list

Facile à utiliser

Plusieurs sliders par pages

Testé sous IE et Firefox

Usage

Copiez SimpleSlider.js dans le repertoire de votre site, liez la librairie dans votre page et déclarez vos sliders dans le onload.

SimpleSlider(divID, width, height, bgcolor="silver", fgcolor="#666666") // declaration d'un slider, qui sera positionné dans divID, aura width de longueur et height de hauteur. les couleurs sont optionelles

SimpleSlider.position // récupère la position du curseur, la valeur est comprise entre 0 et 1

SimpleSlider.onNewPosition // référence a votre propre fonction quand le curseur change de place

SimpleSlider.setPosition(float) // Replace le curseur a l'endroit voulu.

SimpleSlider.thumb.dragging // Pour savoir si le curseur est actuelement en train d'être déplacé, ou pas.

Examples :

un Slider basique

Position : 0

    <div id="slider1" ></div>
    Position : <span id="slider1_label">0</span>
    <script language="javascript">
    var myslider = new SimpleSlider("slider1", 500, 10);
    myslider.onNewPosition = function() {
        document.getElementById("slider1_label").innerHTML = parseInt(myslider.position * 100 * 100) / 100;
    }
    </script>

Avec des couleurs personnalisées

Position : 0

    <div id="slider2" ></div>
    Position : <span id="slider2_label">0</span>
 
    <img id="revolunet_button" src="/static/img/button_revolunet.png"/>
    <script language="javascript">
    var myslider2 = new SimpleSlider("slider2", 300, 20, "green", "yellow");
    myslider2.onNewPosition = function() {
        document.getElementById("slider2_label").innerHTML = parseInt(myslider2.position * 100 * 100) / 100;
        document.getElementById("revolunet_button").style.width = 80 + (myslider2.position * 80);
    }
    </script>

Licence :

Cette librairie est distribuée sous licence BSD.

ToDo :

Intervals

Download

fichier source (clic droit + enregistrer)