This site heavily used sliders as components of various generators. Former sliders were made using HTML, CSS and Javascript. Here the sliders were made only by Javascript. No image was used. Let's see how it works.

Default settings

Only 2 lines of code to launch and style the sliders. Use the default settings, the code is just simple. You could change the default settings in the constructor of the slider object.

var slider0 = new slider();
slider0.init({
        id:"sd"
});

Attach Event

If you need to style the slider and attach it to external event. Here's we do, the keys of the style settings are exactly the Javascript reference for CSS properties.

var slider1 = new slider();
slider1.init({
        id: "dd",
        style: {
            backgroundColor: "red",
            width: "150px"
        },
        pointer: {
            backgroundColor: "#6699cc"
        },
        values: {
            min: 20,
            fontSize: "10px"
        },
        fire: dosomething
})

Dragging Pointer

One aspect you could customerize the style of the slider is the dragging pointer. Currently, you could set the shape of the pointer is a triangle. The size of the triangle adjust according to the width and height of the pointer if you set the isarrow property of the pointer.

Social Bookmark if the page is useful.