Pure JavaScript HTML5 Canvas Range Slider. No stylesheet needed. Simple, elegant and powerful. A quirky alternative to other sliders.

Last update: Aug 15, 2022

Related tags

Learning resource CanvasSlider

Overview

CanvasSlider

CanvasSlider is a lightweight JavaScript range slider.

Most of the range slider controls use Javascript and a stylesheet.

This slider uses a HTML5 canvas element to draw a slider without the need of a stylesheet.

It is easy to maintain and gives a lot of flexibility.

Features

Pure Javascript, no dependencies required.
No dedicated stylesheet needed.
All modern browsers are supported.
Multiple handles: one, two or more handles.
Change the slider value by dragging the handle or clicking on the track.
Create a snapshot image of the slider.
The ability of the handle to either snap to tick values or to be positioned at any point along the slider.
Auto-generate a range of evenly spaced discrete values.
Simple number formatting.
Multiple handler shapes.
User defined color schemes.

Demo

You can try and see a demo application on the included web page.

Screenshots:

Documentation

Documentation can be found on the web page included in this project.

License

CanvasSlider is licensed MIT.

It can be used for free in any personal or commercial project.

The Easel Javascript library provides a full, hierarchical display list, a core interaction model, and helper classes to make working with the HTML5 Canvas element much easier.

EaselJS EaselJS is a library for building high-performance interactive 2D content in HTML5. It provides a feature-rich display list to allow you to ma

Dec 29, 2022

The (extremely) lightweight alternative to the mmenu.js plugin for creating off-canvas mobile menus.

mmenu light The (extremely) lightweight alternative to the mmenu.js plugin for creating off-canvas mobile menus with the exact look and feel. Examples

Dec 12, 2022

A graphical web-based audio visualizer which reads music data using Pure JavaScript, and draws a graphical view in Canvas.

Audio Visualizer JS A graphical web-based audio visualizer which reads music data using Pure JavaScript, and draws a graphical view in Canvas. Demo: h

Aug 9, 2022

Phaser is a fun, free and fast 2D game framework for making HTML5 games for desktop and mobile web browsers, supporting Canvas and WebGL rendering.

Phaser - HTML5 Game Framework Phaser is a fast, free, and fun open source HTML5 game framework that offers WebGL and Canvas rendering across desktop a

Jan 7, 2023

Stylesheet and scripts for implementing dark mode with Bootstrap 4

Bootstrap Darkmode This project provides a stylesheet and two scripts that allow you to implement a dark theme on your website. It is initially loaded

Nov 27, 2022

Generates an image from a DOM node using HTML5 canvas

DOM to Image What is it dom-to-image is a library which can turn arbitrary DOM node into a vector (SVG) or raster (PNG or JPEG) image, written in Java

Jan 3, 2023

Framework for HTML5 Canvas oriented 2D video games

Canvas Engine http://canvasengine.net Description Framework to create video games in HTML5 Canvas Get Started Follow the steps below to start: Downloa

Dec 2, 2022

This package generates a unique ID/String for different browsers. Like chrome, Firefox and any other browsers which supports canvas and audio Fingerprinting.

Broprint.js The world's easiest, smallest and powerful visitor identifier for browsers. This package generates a unique ID/String for different browse

Dec 25, 2022

CSS-based animations triggered by JS, defined in your stylesheet

Anim-x CSS-based animations triggered by JS, defined in your stylesheet. $ npm i https://github.com/LTBL-Studio/anim-x.git Quick start An animation is

Sep 29, 2021

Comments

Is it possible to change the font color of ValueBox

I like your slider because it can be converted to image. But my app has two color themes: dark and light. I need to change the font color of ValueBox and labels for the dark theme. Is it possible? Thanks a lot.

opened by stensalweb 0

Pure JavaScript HTML5 Canvas Range Slider. No stylesheet needed. Simple, elegant and powerful. A quirky alternative to other sliders.

Related tags

Overview

CanvasSlider

Features

Demo

Documentation

License

You might also like...

The Easel Javascript library provides a full, hierarchical display list, a core interaction model, and helper classes to make working with the HTML5 Canvas element much easier.

The (extremely) lightweight alternative to the mmenu.js plugin for creating off-canvas mobile menus.

A graphical web-based audio visualizer which reads music data using Pure JavaScript, and draws a graphical view in Canvas.

Phaser is a fun, free and fast 2D game framework for making HTML5 games for desktop and mobile web browsers, supporting Canvas and WebGL rendering.

Stylesheet and scripts for implementing dark mode with Bootstrap 4

Generates an image from a DOM node using HTML5 canvas

Framework for HTML5 Canvas oriented 2D video games

This package generates a unique ID/String for different browsers. Like chrome, Firefox and any other browsers which supports canvas and audio Fingerprinting.

CSS-based animations triggered by JS, defined in your stylesheet

Comments

Is it possible to change the font color of ValueBox

Owner

Generate release notes from git commit history either commit range or tag range.

Smooth scrolling effect (while using mouse wheel). No jQuery or other unnecessary stuff needed.

Tool Cool Range Slider

Accordion Slider is a jQuery plugin that combines the functionality of a slider with that of an accordion.

A Powerful and Elegant "alert" library for JavaScript that replaces that boring alert style of Javascript.

A fast and powerful http toolkit that take a list of domains to find active domains and other information such as status-code, title, response-time , server, content-type and many other

A (very) minimalist creative coding playground. Make animations using only 64 HTML sliders!

Smooth mobile touch slider for Mobile WebApp, HTML5 App, Hybrid App

Atlan is a CLI that helps you to manage local dockerized infrastructure without any needed knowledge on Docker and Docker Compose.