### jQuery UI slider and spinner

#### Basic Horizontal Sliders

Default Functionality
Default slider.
Custom Start
Determines the value of the slider, if there's only one handle. If there is more than one handle, determines the value of the first handle.
Increment Steps
Increment slider values with the `step` option set to an integer, commonly a dividend of the slider's maximum value. The default increment is 1.
Animation
Whether to slide the handle smoothly when the user clicks on the slider track. Also accepts any valid animation duration.
Min
The minimum value of the slider.
Max
The maximum value of the slider.
Range Slider
Increment slider values with the `step` option set to an integer, commonly a dividend of the slider's maximum value. The default increment is 1.
Disabled
Whether to slide the handle smoothly when the user clicks on the slider track. Also accepts any valid animation duration.

#### Advance Horizontal Sliders

Show All Labels
By default we only show the labels for the `first` and `last` points, shown below is an example of labels being applied to all pips.
Hide Labels & Pips
It is possible to hide all the pips if we want a slider to show just the `min/max` values.
Only Show Pips
Instead of having the values shown for the `first/last` point, we could only show pips. This might be good when we just need to show the user how many options they have without showing explicit values.
Prefix / Suffix
If we need to add some content/context to our values, we can specify a `prefix` and/or `suffix` to spice things up. It would not be possible with css `:before` and `:after` because we already use these pseudo-elements for styling.
Months
It's possible with `rest: "tag"` to set some custom `labels` to the slider instead of the default values. It's important to note here that the slider will still return its integer value when `$(".slider").slider("value");` is called.
More Custom Labels
Here's another example using labels except here we replace roman numbers with the Chinese/Hanzi equivalent.
Steps
Steps can be a little complicated. The default slider allows us to skip along the slider in a pattern. eg: `0, 20, 40...` Steps are hard-wired in to the slider and so the `pips` and `labels` will match the `step` value.
Multiplicative Steps
When a slider has the `.slider("pips");` method applied to it, the `pips` method may also take a `step` option to allow additional control over the way `pips` are stepped visually. This option has no effect on the slider's functionality. The `step` value on the `.slider("pips");` method is multiplicative; meaning it will only show every `nth` step that exists from the main `.slider();` method.

#### Slider Colors

Default Color Slider
Success Color Slider
Info Color Slider
Warning Color Slider
Primary Color Slider
Danger Color Slider

#### Slider Sizing

Extra Large Size
Large Size
Default
Small Size
Extra Small
Extra Large Size
Large Size
Default
Small Size
Extra Small

#### Vertical Sliders

#### Default Vertical Slider

25 60 40

#### Fixed Minimum Range

25 60 40

#### Fixed Maximum Range

25 60 40

#### Vertical Slider With Pips

20 6 12

#### Vertical Slider With Labels

2 8 5

#### Hide Labels & Pips

5 2 8

#### Default Style

25 60 40 40 40

#### Pip Style

5 2 8 6 3

#### Progress Bars

#### Examples

Default

Default determinate progress bar.

Striped Progressbar

This example shows progress bar with progress stripes. To add stripes, use `.ui-progressbar-striped` class to the bar container.

Animated Striped Progressbar

In this example progress bar uses animated stripes. To add stripes, use `.ui-progressbar-striped-animated` class to the bar container.

#### Examples

Custom Label

In this example the progress amount is visually represented with animated percentage values and message when complete. Progress : `Complete!`

Max

In this example the maximum value is set to 1024 and value is set to 840 so the width is calculated accordingly.

Disabled

Disables the progressbar if set to true.

#### Spinner

#### Simple Examples

Default Functionality
Default spinner.
Decimal
Example of a decimal spinner. Step is set to 0.01. The code handling the culture change reads the current spinner value, then changes the culture, then sets the value again, resulting in an updated formatting, based on the new culture.
Currency
Example of a donation form, with currency selection and amount spinner.
Min - Max Limits
Min Limit Set To 5
Max Limit Set To 50
The minimum allowed value. The element's min attribute is used if it exists and the option is not explicitly set. If null, there is no minimum enforced. The maximum allowed value. The element's max attribute is used if it exists and the option is not explicitly set. If null, there is no maximum enforced.
Change Spinner Buttons
Change Button HTML using `_buttonHtml()` function.

#### Advance Examples

Overflow
Overflowing spinner restricted to a range of -10 to 10. For anything above 10, it'll overflow to -10, and the other way round.
Time
A custom widget extending spinner. Use the Globalization plugin to parse and output a timestamp, with custom step and page options. Cursor up/down spins minutes, page up/down spins hours.
Set Value
Dynamically set the value of the spinner to 5.
Steps
The size of the step to take when spinning via buttons or via the `stepUp()/stepDown()` methods. The element's step attribute is used if it exists and the option is not explicitly set.
Disabled
Add option `disabled: true` to disable the spinner.

#### Theme Customizer

Customize & Preview in Real Time

##### Menu Color Options

##### Layout Options

Collapsed Menu
Fixed Layout
Boxed Layout
Static Layout
Native Scroll
Right Side Icons
Bordered Navigation
Flipped Navigation
Collapsible Navigation
Static Navigation
Brand Center
Static Top

##### Navigation Color Options

###### Solid

Default
Primary
Danger
Success
Blue
Cyan
Pink

###### Gradient

Default
Primary
Danger
Success
Blue
Cyan
Pink
Default
Primary
Danger
Success
Blue
Cyan
Pink

### Solid

Default
Primary
Danger
Success
Blue
Cyan
Pink

### Gradient

Default
Primary
Danger
Success
Blue
Cyan
Pink
Default
Primary
Danger
Success
Blue
Cyan
Pink
Buy Now