jQuery Plugin that Allows the User to Specify a Value or Range of Values | roundSlider

roundSlider is a jQuery plugin to turn a DIV element into a circular range slider that helps you scroll the range of values ​​with a mouse drag.

round slider jquery, how to create round slider in html, half circle slider jquery, jquery range slider with steps, round slider css, circular slider javascript

why is that ?

While surfing the web, I’ve found that many people need a perfect scroll bar with a circular path. But most of them weren’t satisfied with the available solutions, so roundSlider will solve that.

Features:

  • No need for images, just JS and CSS code
  • Great look and feel
  • Very easy to customize through CSS
  • Supports all CSS3 animations
  • Slider support
  • Linear step increase
  • Touch support
  • keyboard support
  • Mouse scrolling support
  • Open source (under the MIT license)

Browser support

Since roundSlider builds based on some CSS3 styles like border radius, transform, etc., it supports all major browsers that support these styles, including mobile devices as well.

IE 9+ChromeFirefoxSafariOpera

In IE9, animations are not supported, as they do not support CSS3 transition effects.

Built-in shapes:

  • full circle
  • quarter-top-left
  • quarter-top-right
  • quarter-bottom-right
  • quarter-bottom-left
  • half-top
  • half-bottom
  • half-left
  • half-right
  • pie
  • custom-half
  • custom-quarter

How to make use of it:

1. Include the jQuery roundSlider plugin’s stylesheet and JS information in your webpage which has the jQuery library.

<script src="jquery.min.js"></script>
<link href="src/roundSlider.css" rel="stylesheet" />
<script src="src/roundSlider.js"></script>

2. Create a DIV component for the circular range slider.

<div id="demo"></div>

3. Call the plugin on the DIV component to generate a default range slider with full circle shape.

$("#demo").roundSlider({
  // options here
});

4. The plugin comes with loads of choices that can assist you to customise the range slider.

// min / max value
min: 0,
max: 100,

// custom step
step: 1,

// initial value
value: null,

// customize the slider
radius: 85,
width: 18,
// the below props are relative to "width" when you provide the value starts with "+" or "-"
// otherwise if you provide any number then it will take the exact value
pathWidth: "+0",
handleSize: "+0",

startAngle: 0,
endAngle: "+360",

// enable animation
animation: true,

// enable tooltip
showTooltip: true,
editableTooltip: true,

// read-only mode
readOnly: false,

// disabled mode
disabled: false,

// allow for keyboard interaction
keyboardAction: true,

// enable mousel scroll action
mouseScrollAction: false,

// square, or round
lineCap: "butt",

// default, min-range or range
sliderType: "default",

// full, quarter-top-left, quarter-top-right, quarter-bottom-right, 
// quarter-bottom-left, half-top, half-bottom, half-left, half-right, 
// pie, custom-half, custom-quarter
circleShape: "full",

// round, dot, or square
handleShape: "round",

// 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,

allowInvertedRange: false,
handleRotation: false,
snapToStep: true,

// SVG related properties
svgMode: true,
borderWidth: 1,
borderVisibility: "both",
borderColor: "#AAA",
pathColor: "#FFF",
rangeColor: "#54BBE0",
handleColor: null,
tooltipColor: null,

// events
beforeCreate: null,
create: null,
start: null,
beforeValueChange: null,
drag: null,
change: null,
update: null,
valueChange: null,
stop: null,
tooltipFormat: null

jQuery Circular Range Slider Plugin, roundSlider Github, circle range slider


See Demo And Download

Official Website(soundar24): Click Here

This superior jQuery/javascript plugin is developed by soundar24. For extra Advanced Usages, please go to the official website.

Share