menu
searchType anywhere to search
logo

sliders

Getting started

Sometimes small things matter the most in life!

A slider, also known as a track bar, allows users to set or adjust a value. When the user changes the value, it does not change the format of the interface or other info on the screen.


VIA senior product manage
for UI/UX at REVOX

noUISlider slider

noUiSlider is a range slider without bloat. It offers a ton off features, and it is as small, lightweight and minimal as possible, which is great for mobile use on the many supported devices.

Responsive All Around

noUiSlider works with pretty much any device, mouse, touchscreen or both, and it'll work beautifully in responsive designs.


See Plugin

see the plugin for uiSlider
http://refreshless.com/nouislider/

Compatible with all browsers

noUiSlider supports IE9 and up, and of course the latest versions of the 'evergreen' browsers: Chrome, Safari, Firefox and Opera.

Nouilslider options
Connect

Basic slider with different color options, use of the below classes to quickly create a styled slider. Uses native boostrap colors scheme classes







All the colours included in pages color palette is applied to the default pages slider.

See color Pallete

All colors included except for the menu-color

Connect

The connect setting can be used to control the bar between the handles, or the edges of the slider. Use "lower" to connect to the lower side, or "upper" to connect to the upper side. Setting true sets the bar between the handles.

Margin

When using two handles, the minimum distance between the handles can be set using the margin option. The margin value is relative to the value set in 'range'. This option is only available on standard linear sliders.

Limit

The limit option is the oposite of the margin option, limiting the maximum distance between two handles. As with the margin option, the limit option can only be used on linear sliders.

Step

By default, the slider slides fluently. In order to make the handles jump between intervals, you can use this option. The step option is relative to the values provided to the range.

Orientation

The orientation setting can be used to set the slider to "vertical" or "horizontal".Set dimensions! Vertical sliders don't assume a default height, so you'll need to set one. You can use any unit you want, including % or px.

Ion.range Slider

Ion.RangeSlider is an easily customizable range slider that supports events and public methods which have flexible settings that can be completely altered with CSS.


See Plugin

see the plugin for uiSlider
http://ionden.com/a/plugins/ion.rangeSlider/en.html

Advance Options

Ion.RangeSlider is the best when dealing with advanced options. It has many features like, Ability to prettify large numbers, Support of custom values diapason, etc..

Automatic Generated Grid

The sliders are made with an automatically generated grid system that will adapt to any screen size.

Ion.range options
ION.Range Options
Color Options

Basic slider with different color options, use of the below classes to quickly create a styled slider. Uses native boostrap colors scheme classes





Size set from 0to 5000
Adding postfix +to max value
Set slider type to double
symbol as prefix $
Set slider type to double
Grid TRUE
Size set from 1000to 100 000
Value from 30 000to 90 000
Adding postfix EUROto max value
symbol as prefix $
Set slider type to double
symbol as prefix $
Grid TRUE
Size set from 0to 10
Set fractional step 0.1
Grid TRUE
Size set from -50+50 5000
Set FROM value to 0
symbol as prefix Degress
Set values array to month names
Adding postfix +to max value
Everything else will be automatically adjusted
Set step value to 1000
Slider value Hide
Adding postfix Miles
close
  • Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam

  • Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam

    12/12/20 chevron_right
  • Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam

    12/12/20 chevron_right
  • Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam

    12/12/20 chevron_right
  • Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam

    12/12/20 chevron_right
21st april 2020 2:13am

Press enter to search

suggestions :

Pages Search Results:

ice cream on pages

via john smith

T
ice cream related topics

via pages

M
ice cream music

via pagesmix

facebook
ice cream on facebook

via facebook

twitter
Tweats on ice cream

via twitter

google_plus
Circles on ice cream

via google plus