revolunet, conseil NTIC intranet internet  

Simple Slider, a minimalist javascript slider

Introduction

SimpleSlider.js is a light library to add slider widgets to your web apps. It's only horizontal and can be easily customised.

This Library is under BSD, so you can redistribute it and/or modify it under the terms of the BSD License.

Any sugestions or questions are wellcome on our email : contact@revolunet.com

Enjoy ;)

Features list

  • Easy to use
  • You can use multiples sliders per page
  • Works on IE and Firefox

    • Use

    Just copy SimpleSlider.js into your Site's folder, add a reference to the library in your page and declare your slider(s) in your onLoad

    SimpleSlider(divID, width, height, bgcolor="silver", fgcolor="#666666") // declare a slider, which will be positionned in divID, width px long, height px height, colors optionnals
    SimpleSlider.position // float between 0 and 1 for the thumb position
    SimpleSlider.onNewPosition // trigger your own function when the position change
    SimpleSlider.setPosition(float) // receives a float between 0 and 1 and places the thumb on the slider at desired position
    SimpleSlider.thumb.dragging // allows you to check if the thumb is currently being dragged or not (dropped)

    Examples :

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

    another basic horizontal slider, with custom colors
    Position : 0
    <div id="slider2" ></div> Position : <span id="slider2_label">0</span> <br> <img id="revolunet_button" src="revolunet.png"/> <script language="javascript"> var myslider2 = new Slider("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 :

    The code is under BSD, so you can redistribute it and/or modify it under the terms of the BSD License.

    Download

  • source file (right click + save)

    • Commentaires