All Projects → soundar24 → Roundslider

soundar24 / Roundslider

Licence: mit
roundSlider - A free jQuery plugin

Programming Languages

javascript
184084 projects - #8 most used programming language

Projects that are alternatives of or similar to Roundslider

Rangeslider.js
🎚 HTML5 input range slider element polyfill
Stars: ✭ 2,153 (+828.02%)
Mutual labels:  jquery-plugin, range-slider
Sliderawesome
A slider plugin full of various effects and styles that allows any customization. 一款可定制的风格效果多样的轮播图插件。
Stars: ✭ 204 (-12.07%)
Mutual labels:  jquery-plugin, slider
React Slider Kit
react-slider-kit is going to be a comprehensive solution to slider feature in react.
Stars: ✭ 219 (-5.6%)
Mutual labels:  slider, range-slider
range-slider
Customizable slider (range) component for JavaScript with no dependencies
Stars: ✭ 26 (-88.79%)
Mutual labels:  slider, range-slider
Jcslider
🏂 A responsive slider jQuery plugin with CSS animations
Stars: ✭ 52 (-77.59%)
Mutual labels:  jquery-plugin, slider
React Slider
Accessible, CSS agnostic, slider component for React.
Stars: ✭ 627 (+170.26%)
Mutual labels:  slider, range-slider
vue-histogram-slider
Range slider with histogram for Vue.js
Stars: ✭ 111 (-52.16%)
Mutual labels:  slider, range-slider
Vue Slider Component
🌡 A highly customized slider component
Stars: ✭ 2,158 (+830.17%)
Mutual labels:  slider, range-slider
Ion.rangeslider
jQuery only range slider
Stars: ✭ 2,494 (+975%)
Mutual labels:  slider, range-slider
Jquery Resizable
A small jQuery plug-in to make DOM components resizable
Stars: ✭ 206 (-11.21%)
Mutual labels:  jquery-plugin
Magnify
A lightweight jQuery magnifying glass zoom plugin.
Stars: ✭ 218 (-6.03%)
Mutual labels:  jquery-plugin
Fancytree
JavaScript tree view / tree grid plugin with support for keyboard, inline editing, filtering, checkboxes, drag'n'drop, and lazy loading
Stars: ✭ 2,398 (+933.62%)
Mutual labels:  jquery-plugin
Gridtab
GridTab is a lightweight jQuery plugin to create grid based responsive tabs https://gopalraju.github.io/gridtab
Stars: ✭ 210 (-9.48%)
Mutual labels:  jquery-plugin
Jquery Aniview
A jQuery plugin that works in harmony with animate.css in order to enable animations only when content comes into view.
Stars: ✭ 205 (-11.64%)
Mutual labels:  jquery-plugin
Numberslidingpicker
Android Number Picker with gestures
Stars: ✭ 225 (-3.02%)
Mutual labels:  slider
Disableautofill.js
Disable form auto-fill and auto-complete functions.
Stars: ✭ 201 (-13.36%)
Mutual labels:  jquery-plugin
Jquery.terminal
jQuery Terminal Emulator - JavaScript library for creating web-based terminals with custom commands
Stars: ✭ 2,623 (+1030.6%)
Mutual labels:  jquery-plugin
Rangetouch
A super tiny library to make `<input type='range'>` sliders work better on touch devices
Stars: ✭ 224 (-3.45%)
Mutual labels:  slider
Percircle
⭕️ CSS percentage circle built with jQuery
Stars: ✭ 217 (-6.47%)
Mutual labels:  jquery-plugin
Bootstrap Checkbox
A checkbox component based on Bootstrap framework.
Stars: ✭ 214 (-7.76%)
Mutual labels:  jquery-plugin

roundSlider - A free jQuery plugin

npm GitHub

What's this ?

Round slider (also can call as Circular slider, Radial slider) is a jQuery plugin that allows the user to select a value or range of values.

Not only a round slider, it supports the quarter, half and pie circle shapes also.

roundSlider - full slider, pie slider, half slider and quarter slider types

You can check the demos of various circle shapes here.

Different Theming and Appearances ?

By customizing the CSS styles we can make different appearances.

roundSlider - different theming and appearances

You can check the detailed demos here.

Browser Support

IE 9+, Chrome, Firefox, Safari, Opera (including Mobile devices).

Options

The roundSlider has several properties and events to interact with the control programmatically.

To know more about the Options, please check the documentation.

$("#slider").roundSlider({
	min: 0,
	max: 100,
	step: 1,
	value: null,
	radius: 85,
	width: 16,
	handleSize: "+0",
	startAngle: 0,
	endAngle: "+360",
	animation: true,
	showTooltip: true,
	editableTooltip: true,
	readOnly: false,
	disabled: false,
	keyboardAction: true,
	mouseScrollAction: false,
	sliderType: "default",
	circleShape: "full",
	handleShape: "round",
	lineCap: "butt",

	// the 'startValue' property decides at which point the slider should start.
	// otherwise, by default the slider starts with min value. this is mainly used
	// for min-range slider, where you can customize the min-range start position.
	startValue: null,

	// SVG related properties
	svgMode: false,
	borderWidth: 1,
	borderColor: null,
	pathColor: null,
	rangeColor: null,
	tooltipColor: null,

	// events
	beforeCreate: null,
	create: null,
	start: null,
	// 'beforeValueChange' will be triggered before 'valueChange', and it can be cancellable
	beforeValueChange: null,
	drag: null,
	change: null,
	// 'update' event is the combination of 'drag' and 'change'
	update: null,
	// 'valueChange' event is similar to 'update' event, in addition it will trigger
	// even the value was changed through programmatically also.
	valueChange: null,
	stop: null,
	tooltipFormat: null
});

Some quick links

Test environment

roundSlider - test environment

Licence

roundSlider is licensed under the terms of the MIT license.

Note that the project description data, including the texts, logos, images, and/or trademarks, for each open source project belongs to its rightful owner. If you wish to add or remove any projects, please contact us at [email protected].