initial import
This commit is contained in:
27
static/bower_components/ion.rangeSlider/CONTRIBUTING.md
vendored
Normal file
27
static/bower_components/ion.rangeSlider/CONTRIBUTING.md
vendored
Normal file
@@ -0,0 +1,27 @@
|
||||
# Contributing to Ion.RangeSlider project
|
||||
|
||||
### Code style
|
||||
|
||||
1. Project is using 4 space indentation
|
||||
2. Function and metod names should be written in camelCase
|
||||
3. Variables name should be written in lower_case
|
||||
4. New methods should have JSDoc descriptions
|
||||
|
||||
### Guide for Pull Requests with bug fixes
|
||||
|
||||
1. Only 1 bugfix per Pull Request
|
||||
2. Should have bug description
|
||||
3. Should have bug screenshots (if possible)
|
||||
4. Should have working demo. Use JSFIDDLE: https://jsfiddle.net/IonDen/b79q0vnm/
|
||||
|
||||
### Guide for Pull Requests with new features
|
||||
|
||||
1. Only 1 feature per Pull Request
|
||||
2. Should have statement, why feature is important and should be included in to plugin
|
||||
3. Should have feature description
|
||||
4. Should have feature screenshots (if possible)
|
||||
5. Should have working demo. Use JSFIDDLE: https://jsfiddle.net/IonDen/b79q0vnm/
|
||||
|
||||
### Guide for Pull Requests with grammar fixes
|
||||
|
||||
1. Just create a pull request :)
|
||||
9
static/bower_components/ion.rangeSlider/License.md
vendored
Normal file
9
static/bower_components/ion.rangeSlider/License.md
vendored
Normal file
@@ -0,0 +1,9 @@
|
||||
## The MIT License
|
||||
|
||||
Copyright © 2018 by Denis Ineshin (http://ionden.com)
|
||||
|
||||
Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
|
||||
|
||||
The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
|
||||
|
||||
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
|
||||
BIN
static/bower_components/ion.rangeSlider/_tmp/logo-ion-range-slider.png
vendored
Normal file
BIN
static/bower_components/ion.rangeSlider/_tmp/logo-ion-range-slider.png
vendored
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 2.3 KiB |
41
static/bower_components/ion.rangeSlider/bower.json
vendored
Normal file
41
static/bower_components/ion.rangeSlider/bower.json
vendored
Normal file
@@ -0,0 +1,41 @@
|
||||
{
|
||||
"name": "ion.rangeSlider",
|
||||
"version": "2.3.0",
|
||||
"homepage": "https://github.com/IonDen/ion.rangeSlider",
|
||||
"authors": [
|
||||
{
|
||||
"name": "IonDen",
|
||||
"email": "denis.ineshin@gmail.com",
|
||||
"homepage": "http://ionden.com"
|
||||
}
|
||||
],
|
||||
"description": "Powerful range slider with skin support",
|
||||
"repository": {
|
||||
"type": "git",
|
||||
"url": "git://github.com/IonDen/ion.rangeSlider.git"
|
||||
},
|
||||
"main": [
|
||||
"js/ion.rangeSlider.js",
|
||||
"css/ion.rangeSlider.css",
|
||||
"css/ion.rangeSlider.skinFlat.css",
|
||||
"img/sprite-skin-flat.png"
|
||||
],
|
||||
"dependencies": {
|
||||
"jquery": ">=1.8"
|
||||
},
|
||||
"moduleType": [
|
||||
"globals"
|
||||
],
|
||||
"keywords": [
|
||||
"jquery-plugin",
|
||||
"diapason",
|
||||
"ion",
|
||||
"range",
|
||||
"slider"
|
||||
],
|
||||
"license": "MIT",
|
||||
"ignore": [
|
||||
"PSD",
|
||||
"ion-rangeSlider.jquery.json"
|
||||
]
|
||||
}
|
||||
675
static/bower_components/ion.rangeSlider/css/ion.rangeSlider.css
vendored
Normal file
675
static/bower_components/ion.rangeSlider/css/ion.rangeSlider.css
vendored
Normal file
@@ -0,0 +1,675 @@
|
||||
/**
|
||||
Ion.RangeSlider, 2.3.0
|
||||
© Denis Ineshin, 2010 - 2018, IonDen.com
|
||||
Build date: 2018-12-11 23:23:51
|
||||
*/
|
||||
.irs {
|
||||
position: relative;
|
||||
display: block;
|
||||
-webkit-touch-callout: none;
|
||||
-webkit-user-select: none;
|
||||
-khtml-user-select: none;
|
||||
-moz-user-select: none;
|
||||
-ms-user-select: none;
|
||||
user-select: none;
|
||||
font-size: 12px;
|
||||
font-family: Arial, sans-serif;
|
||||
}
|
||||
.irs-line {
|
||||
position: relative;
|
||||
display: block;
|
||||
overflow: hidden;
|
||||
outline: none !important;
|
||||
}
|
||||
.irs-bar {
|
||||
position: absolute;
|
||||
display: block;
|
||||
left: 0;
|
||||
width: 0;
|
||||
}
|
||||
.irs-shadow {
|
||||
position: absolute;
|
||||
display: none;
|
||||
left: 0;
|
||||
width: 0;
|
||||
}
|
||||
.irs-handle {
|
||||
position: absolute;
|
||||
display: block;
|
||||
box-sizing: border-box;
|
||||
cursor: default;
|
||||
z-index: 1;
|
||||
}
|
||||
.irs-handle.type_last {
|
||||
z-index: 2;
|
||||
}
|
||||
.irs-min,
|
||||
.irs-max {
|
||||
position: absolute;
|
||||
display: block;
|
||||
cursor: default;
|
||||
}
|
||||
.irs-min {
|
||||
left: 0;
|
||||
}
|
||||
.irs-max {
|
||||
right: 0;
|
||||
}
|
||||
.irs-from,
|
||||
.irs-to,
|
||||
.irs-single {
|
||||
position: absolute;
|
||||
display: block;
|
||||
top: 0;
|
||||
left: 0;
|
||||
cursor: default;
|
||||
white-space: nowrap;
|
||||
}
|
||||
.irs-grid {
|
||||
position: absolute;
|
||||
display: none;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 20px;
|
||||
}
|
||||
.irs-with-grid .irs-grid {
|
||||
display: block;
|
||||
}
|
||||
.irs-grid-pol {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 1px;
|
||||
height: 8px;
|
||||
background: #000;
|
||||
}
|
||||
.irs-grid-pol.small {
|
||||
height: 4px;
|
||||
}
|
||||
.irs-grid-text {
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
white-space: nowrap;
|
||||
text-align: center;
|
||||
font-size: 9px;
|
||||
line-height: 9px;
|
||||
padding: 0 3px;
|
||||
color: #000;
|
||||
}
|
||||
.irs-disable-mask {
|
||||
position: absolute;
|
||||
display: block;
|
||||
top: 0;
|
||||
left: -1%;
|
||||
width: 102%;
|
||||
height: 100%;
|
||||
cursor: default;
|
||||
background: rgba(0, 0, 0, 0);
|
||||
z-index: 2;
|
||||
}
|
||||
.lt-ie9 .irs-disable-mask {
|
||||
background: #000;
|
||||
filter: alpha(opacity=0);
|
||||
cursor: not-allowed;
|
||||
}
|
||||
.irs-disabled {
|
||||
opacity: 0.4;
|
||||
}
|
||||
.irs-hidden-input {
|
||||
position: absolute !important;
|
||||
display: block !important;
|
||||
top: 0 !important;
|
||||
left: 0 !important;
|
||||
width: 0 !important;
|
||||
height: 0 !important;
|
||||
font-size: 0 !important;
|
||||
line-height: 0 !important;
|
||||
padding: 0 !important;
|
||||
margin: 0 !important;
|
||||
overflow: hidden;
|
||||
outline: none !important;
|
||||
z-index: -9999 !important;
|
||||
background: none !important;
|
||||
border-style: solid !important;
|
||||
border-color: transparent !important;
|
||||
}
|
||||
.irs--flat {
|
||||
height: 40px;
|
||||
}
|
||||
.irs--flat.irs-with-grid {
|
||||
height: 60px;
|
||||
}
|
||||
.irs--flat .irs-line {
|
||||
top: 25px;
|
||||
height: 12px;
|
||||
background-color: #e1e4e9;
|
||||
border-radius: 4px;
|
||||
}
|
||||
.irs--flat .irs-bar {
|
||||
top: 25px;
|
||||
height: 12px;
|
||||
background-color: #ed5565;
|
||||
}
|
||||
.irs--flat .irs-bar--single {
|
||||
border-radius: 4px 0 0 4px;
|
||||
}
|
||||
.irs--flat .irs-shadow {
|
||||
height: 1px;
|
||||
bottom: 16px;
|
||||
background-color: #e1e4e9;
|
||||
}
|
||||
.irs--flat .irs-handle {
|
||||
top: 22px;
|
||||
width: 16px;
|
||||
height: 18px;
|
||||
background-color: transparent;
|
||||
}
|
||||
.irs--flat .irs-handle > i:first-child {
|
||||
position: absolute;
|
||||
display: block;
|
||||
top: 0;
|
||||
left: 50%;
|
||||
width: 2px;
|
||||
height: 100%;
|
||||
margin-left: -1px;
|
||||
background-color: #da4453;
|
||||
}
|
||||
.irs--flat .irs-handle.state_hover > i:first-child,
|
||||
.irs--flat .irs-handle:hover > i:first-child {
|
||||
background-color: #a43540;
|
||||
}
|
||||
.irs--flat .irs-min,
|
||||
.irs--flat .irs-max {
|
||||
top: 0;
|
||||
padding: 1px 3px;
|
||||
color: #999;
|
||||
font-size: 10px;
|
||||
line-height: 1.333;
|
||||
text-shadow: none;
|
||||
background-color: #e1e4e9;
|
||||
border-radius: 4px;
|
||||
}
|
||||
.irs--flat .irs-from,
|
||||
.irs--flat .irs-to,
|
||||
.irs--flat .irs-single {
|
||||
color: white;
|
||||
font-size: 10px;
|
||||
line-height: 1.333;
|
||||
text-shadow: none;
|
||||
padding: 1px 5px;
|
||||
background-color: #ed5565;
|
||||
border-radius: 4px;
|
||||
}
|
||||
.irs--flat .irs-from:before,
|
||||
.irs--flat .irs-to:before,
|
||||
.irs--flat .irs-single:before {
|
||||
position: absolute;
|
||||
display: block;
|
||||
content: "";
|
||||
bottom: -6px;
|
||||
left: 50%;
|
||||
width: 0;
|
||||
height: 0;
|
||||
margin-left: -3px;
|
||||
overflow: hidden;
|
||||
border: 3px solid transparent;
|
||||
border-top-color: #ed5565;
|
||||
}
|
||||
.irs--flat .irs-grid-pol {
|
||||
background-color: #e1e4e9;
|
||||
}
|
||||
.irs--flat .irs-grid-text {
|
||||
color: #999;
|
||||
}
|
||||
.irs--big {
|
||||
height: 55px;
|
||||
}
|
||||
.irs--big.irs-with-grid {
|
||||
height: 70px;
|
||||
}
|
||||
.irs--big .irs-line {
|
||||
top: 33px;
|
||||
height: 12px;
|
||||
background-color: white;
|
||||
background: linear-gradient(to bottom, #ddd -50%, white 150%);
|
||||
border: 1px solid #ccc;
|
||||
border-radius: 12px;
|
||||
}
|
||||
.irs--big .irs-bar {
|
||||
top: 33px;
|
||||
height: 12px;
|
||||
background-color: #92bce0;
|
||||
border: 1px solid #428bca;
|
||||
background: linear-gradient(to bottom, #ffffff 0%, #428bca 30%, #b9d4ec 100%);
|
||||
box-shadow: inset 0 0 1px 1px rgba(255, 255, 255, 0.5);
|
||||
}
|
||||
.irs--big .irs-bar--single {
|
||||
border-radius: 12px 0 0 12px;
|
||||
}
|
||||
.irs--big .irs-shadow {
|
||||
height: 1px;
|
||||
bottom: 16px;
|
||||
background-color: rgba(66, 139, 202, 0.5);
|
||||
}
|
||||
.irs--big .irs-handle {
|
||||
top: 25px;
|
||||
width: 30px;
|
||||
height: 30px;
|
||||
border: 1px solid rgba(0, 0, 0, 0.3);
|
||||
background-color: #cbcfd5;
|
||||
background: linear-gradient(to bottom, white 0%, #B4B9BE 30%, white 100%);
|
||||
box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.2), inset 0 0 3px 1px white;
|
||||
border-radius: 30px;
|
||||
}
|
||||
.irs--big .irs-handle.state_hover,
|
||||
.irs--big .irs-handle:hover {
|
||||
border-color: rgba(0, 0, 0, 0.45);
|
||||
background-color: #939ba7;
|
||||
background: linear-gradient(to bottom, white 0%, #919BA5 30%, white 100%);
|
||||
}
|
||||
.irs--big .irs-min,
|
||||
.irs--big .irs-max {
|
||||
top: 0;
|
||||
padding: 1px 5px;
|
||||
color: white;
|
||||
text-shadow: none;
|
||||
background-color: #9f9f9f;
|
||||
border-radius: 3px;
|
||||
}
|
||||
.irs--big .irs-from,
|
||||
.irs--big .irs-to,
|
||||
.irs--big .irs-single {
|
||||
color: white;
|
||||
text-shadow: none;
|
||||
padding: 1px 5px;
|
||||
background-color: #428bca;
|
||||
background: linear-gradient(to bottom, #428bca 0%, #3071a9 100%);
|
||||
border-radius: 3px;
|
||||
}
|
||||
.irs--big .irs-grid-pol {
|
||||
background-color: #428bca;
|
||||
}
|
||||
.irs--big .irs-grid-text {
|
||||
color: #428bca;
|
||||
}
|
||||
.irs--modern {
|
||||
height: 55px;
|
||||
}
|
||||
.irs--modern.irs-with-grid {
|
||||
height: 55px;
|
||||
}
|
||||
.irs--modern .irs-line {
|
||||
top: 25px;
|
||||
height: 5px;
|
||||
background-color: #d1d6e0;
|
||||
background: linear-gradient(to bottom, #e0e4ea 0%, #d1d6e0 100%);
|
||||
border: 1px solid #a3adc1;
|
||||
border-bottom-width: 0;
|
||||
border-radius: 5px;
|
||||
}
|
||||
.irs--modern .irs-bar {
|
||||
top: 25px;
|
||||
height: 5px;
|
||||
background: #20b426;
|
||||
background: linear-gradient(to bottom, #20b426 0%, #18891d 100%);
|
||||
}
|
||||
.irs--modern .irs-bar--single {
|
||||
border-radius: 5px 0 0 5px;
|
||||
}
|
||||
.irs--modern .irs-shadow {
|
||||
height: 1px;
|
||||
bottom: 21px;
|
||||
background-color: rgba(209, 214, 224, 0.5);
|
||||
}
|
||||
.irs--modern .irs-handle {
|
||||
top: 37px;
|
||||
width: 12px;
|
||||
height: 13px;
|
||||
border: 1px solid #a3adc1;
|
||||
border-top-width: 0;
|
||||
box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.1);
|
||||
border-radius: 0 0 3px 3px;
|
||||
}
|
||||
.irs--modern .irs-handle > i:nth-child(1) {
|
||||
position: absolute;
|
||||
display: block;
|
||||
top: -4px;
|
||||
left: 1px;
|
||||
width: 6px;
|
||||
height: 6px;
|
||||
border: 1px solid #a3adc1;
|
||||
background: white;
|
||||
transform: rotate(45deg);
|
||||
}
|
||||
.irs--modern .irs-handle > i:nth-child(2) {
|
||||
position: absolute;
|
||||
display: block;
|
||||
box-sizing: border-box;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 10px;
|
||||
height: 12px;
|
||||
background: #e9e6e6;
|
||||
background: linear-gradient(to bottom, white 0%, #e9e6e6 100%);
|
||||
border-radius: 0 0 3px 3px;
|
||||
}
|
||||
.irs--modern .irs-handle > i:nth-child(3) {
|
||||
position: absolute;
|
||||
display: block;
|
||||
box-sizing: border-box;
|
||||
top: 3px;
|
||||
left: 3px;
|
||||
width: 4px;
|
||||
height: 5px;
|
||||
border-left: 1px solid #a3adc1;
|
||||
border-right: 1px solid #a3adc1;
|
||||
}
|
||||
.irs--modern .irs-handle.state_hover,
|
||||
.irs--modern .irs-handle:hover {
|
||||
border-color: #7685a2;
|
||||
background: #c3c7cd;
|
||||
background: linear-gradient(to bottom, #ffffff 0%, #919ba5 30%, #ffffff 100%);
|
||||
}
|
||||
.irs--modern .irs-handle.state_hover > i:nth-child(1),
|
||||
.irs--modern .irs-handle:hover > i:nth-child(1) {
|
||||
border-color: #7685a2;
|
||||
}
|
||||
.irs--modern .irs-handle.state_hover > i:nth-child(3),
|
||||
.irs--modern .irs-handle:hover > i:nth-child(3) {
|
||||
border-color: #48536a;
|
||||
}
|
||||
.irs--modern .irs-min,
|
||||
.irs--modern .irs-max {
|
||||
top: 0;
|
||||
font-size: 10px;
|
||||
line-height: 1.333;
|
||||
text-shadow: none;
|
||||
padding: 1px 5px;
|
||||
color: white;
|
||||
background-color: #d1d6e0;
|
||||
border-radius: 5px;
|
||||
}
|
||||
.irs--modern .irs-from,
|
||||
.irs--modern .irs-to,
|
||||
.irs--modern .irs-single {
|
||||
font-size: 10px;
|
||||
line-height: 1.333;
|
||||
text-shadow: none;
|
||||
padding: 1px 5px;
|
||||
background-color: #20b426;
|
||||
color: white;
|
||||
border-radius: 5px;
|
||||
}
|
||||
.irs--modern .irs-from:before,
|
||||
.irs--modern .irs-to:before,
|
||||
.irs--modern .irs-single:before {
|
||||
position: absolute;
|
||||
display: block;
|
||||
content: "";
|
||||
bottom: -6px;
|
||||
left: 50%;
|
||||
width: 0;
|
||||
height: 0;
|
||||
margin-left: -3px;
|
||||
overflow: hidden;
|
||||
border: 3px solid transparent;
|
||||
border-top-color: #20b426;
|
||||
}
|
||||
.irs--modern .irs-grid {
|
||||
height: 25px;
|
||||
}
|
||||
.irs--modern .irs-grid-pol {
|
||||
background-color: #dedede;
|
||||
}
|
||||
.irs--modern .irs-grid-text {
|
||||
color: silver;
|
||||
font-size: 13px;
|
||||
}
|
||||
.irs--sharp {
|
||||
height: 50px;
|
||||
font-size: 12px;
|
||||
line-height: 1;
|
||||
}
|
||||
.irs--sharp.irs-with-grid {
|
||||
height: 57px;
|
||||
}
|
||||
.irs--sharp .irs-line {
|
||||
top: 30px;
|
||||
height: 2px;
|
||||
background-color: black;
|
||||
border-radius: 2px;
|
||||
}
|
||||
.irs--sharp .irs-bar {
|
||||
top: 30px;
|
||||
height: 2px;
|
||||
background-color: #ee22fa;
|
||||
}
|
||||
.irs--sharp .irs-bar--single {
|
||||
border-radius: 2px 0 0 2px;
|
||||
}
|
||||
.irs--sharp .irs-shadow {
|
||||
height: 1px;
|
||||
bottom: 21px;
|
||||
background-color: rgba(0, 0, 0, 0.5);
|
||||
}
|
||||
.irs--sharp .irs-handle {
|
||||
top: 25px;
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
background-color: #a804b2;
|
||||
}
|
||||
.irs--sharp .irs-handle > i:first-child {
|
||||
position: absolute;
|
||||
display: block;
|
||||
top: 100%;
|
||||
left: 0;
|
||||
width: 0;
|
||||
height: 0;
|
||||
border: 5px solid transparent;
|
||||
border-top-color: #a804b2;
|
||||
}
|
||||
.irs--sharp .irs-handle.state_hover,
|
||||
.irs--sharp .irs-handle:hover {
|
||||
background-color: black;
|
||||
}
|
||||
.irs--sharp .irs-handle.state_hover > i:first-child,
|
||||
.irs--sharp .irs-handle:hover > i:first-child {
|
||||
border-top-color: black;
|
||||
}
|
||||
.irs--sharp .irs-min,
|
||||
.irs--sharp .irs-max {
|
||||
color: white;
|
||||
font-size: 14px;
|
||||
line-height: 1;
|
||||
top: 0;
|
||||
padding: 3px 4px;
|
||||
opacity: 0.4;
|
||||
background-color: #a804b2;
|
||||
border-radius: 2px;
|
||||
}
|
||||
.irs--sharp .irs-from,
|
||||
.irs--sharp .irs-to,
|
||||
.irs--sharp .irs-single {
|
||||
font-size: 14px;
|
||||
line-height: 1;
|
||||
text-shadow: none;
|
||||
padding: 3px 4px;
|
||||
background-color: #a804b2;
|
||||
color: white;
|
||||
border-radius: 2px;
|
||||
}
|
||||
.irs--sharp .irs-from:before,
|
||||
.irs--sharp .irs-to:before,
|
||||
.irs--sharp .irs-single:before {
|
||||
position: absolute;
|
||||
display: block;
|
||||
content: "";
|
||||
bottom: -6px;
|
||||
left: 50%;
|
||||
width: 0;
|
||||
height: 0;
|
||||
margin-left: -3px;
|
||||
overflow: hidden;
|
||||
border: 3px solid transparent;
|
||||
border-top-color: #a804b2;
|
||||
}
|
||||
.irs--sharp .irs-grid {
|
||||
height: 25px;
|
||||
}
|
||||
.irs--sharp .irs-grid-pol {
|
||||
background-color: #dedede;
|
||||
}
|
||||
.irs--sharp .irs-grid-text {
|
||||
color: silver;
|
||||
font-size: 13px;
|
||||
}
|
||||
.irs--round {
|
||||
height: 50px;
|
||||
}
|
||||
.irs--round.irs-with-grid {
|
||||
height: 65px;
|
||||
}
|
||||
.irs--round .irs-line {
|
||||
top: 36px;
|
||||
height: 4px;
|
||||
background-color: #dee4ec;
|
||||
border-radius: 4px;
|
||||
}
|
||||
.irs--round .irs-bar {
|
||||
top: 36px;
|
||||
height: 4px;
|
||||
background-color: #006cfa;
|
||||
}
|
||||
.irs--round .irs-bar--single {
|
||||
border-radius: 4px 0 0 4px;
|
||||
}
|
||||
.irs--round .irs-shadow {
|
||||
height: 4px;
|
||||
bottom: 21px;
|
||||
background-color: rgba(222, 228, 236, 0.5);
|
||||
}
|
||||
.irs--round .irs-handle {
|
||||
top: 26px;
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
border: 4px solid #006cfa;
|
||||
background-color: white;
|
||||
border-radius: 24px;
|
||||
box-shadow: 0 1px 3px rgba(0, 0, 255, 0.3);
|
||||
}
|
||||
.irs--round .irs-handle.state_hover,
|
||||
.irs--round .irs-handle:hover {
|
||||
background-color: #f0f6ff;
|
||||
}
|
||||
.irs--round .irs-min,
|
||||
.irs--round .irs-max {
|
||||
color: #333;
|
||||
font-size: 14px;
|
||||
line-height: 1;
|
||||
top: 0;
|
||||
padding: 3px 5px;
|
||||
background-color: rgba(0, 0, 0, 0.1);
|
||||
border-radius: 4px;
|
||||
}
|
||||
.irs--round .irs-from,
|
||||
.irs--round .irs-to,
|
||||
.irs--round .irs-single {
|
||||
font-size: 14px;
|
||||
line-height: 1;
|
||||
text-shadow: none;
|
||||
padding: 3px 5px;
|
||||
background-color: #006cfa;
|
||||
color: white;
|
||||
border-radius: 4px;
|
||||
}
|
||||
.irs--round .irs-from:before,
|
||||
.irs--round .irs-to:before,
|
||||
.irs--round .irs-single:before {
|
||||
position: absolute;
|
||||
display: block;
|
||||
content: "";
|
||||
bottom: -6px;
|
||||
left: 50%;
|
||||
width: 0;
|
||||
height: 0;
|
||||
margin-left: -3px;
|
||||
overflow: hidden;
|
||||
border: 3px solid transparent;
|
||||
border-top-color: #006cfa;
|
||||
}
|
||||
.irs--round .irs-grid {
|
||||
height: 25px;
|
||||
}
|
||||
.irs--round .irs-grid-pol {
|
||||
background-color: #dedede;
|
||||
}
|
||||
.irs--round .irs-grid-text {
|
||||
color: silver;
|
||||
font-size: 13px;
|
||||
}
|
||||
.irs--square {
|
||||
height: 50px;
|
||||
}
|
||||
.irs--square.irs-with-grid {
|
||||
height: 60px;
|
||||
}
|
||||
.irs--square .irs-line {
|
||||
top: 31px;
|
||||
height: 4px;
|
||||
background-color: #dedede;
|
||||
}
|
||||
.irs--square .irs-bar {
|
||||
top: 31px;
|
||||
height: 4px;
|
||||
background-color: black;
|
||||
}
|
||||
.irs--square .irs-shadow {
|
||||
height: 2px;
|
||||
bottom: 21px;
|
||||
background-color: #dedede;
|
||||
}
|
||||
.irs--square .irs-handle {
|
||||
top: 25px;
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
border: 3px solid black;
|
||||
background-color: white;
|
||||
-webkit-transform: rotate(45deg);
|
||||
-ms-transform: rotate(45deg);
|
||||
transform: rotate(45deg);
|
||||
}
|
||||
.irs--square .irs-handle.state_hover,
|
||||
.irs--square .irs-handle:hover {
|
||||
background-color: #f0f6ff;
|
||||
}
|
||||
.irs--square .irs-min,
|
||||
.irs--square .irs-max {
|
||||
color: #333;
|
||||
font-size: 14px;
|
||||
line-height: 1;
|
||||
top: 0;
|
||||
padding: 3px 5px;
|
||||
background-color: rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
.irs--square .irs-from,
|
||||
.irs--square .irs-to,
|
||||
.irs--square .irs-single {
|
||||
font-size: 14px;
|
||||
line-height: 1;
|
||||
text-shadow: none;
|
||||
padding: 3px 5px;
|
||||
background-color: black;
|
||||
color: white;
|
||||
}
|
||||
.irs--square .irs-grid {
|
||||
height: 25px;
|
||||
}
|
||||
.irs--square .irs-grid-pol {
|
||||
background-color: #dedede;
|
||||
}
|
||||
.irs--square .irs-grid-text {
|
||||
color: silver;
|
||||
font-size: 11px;
|
||||
}
|
||||
1
static/bower_components/ion.rangeSlider/css/ion.rangeSlider.min.css
vendored
Normal file
1
static/bower_components/ion.rangeSlider/css/ion.rangeSlider.min.css
vendored
Normal file
File diff suppressed because one or more lines are too long
163
static/bower_components/ion.rangeSlider/history.md
vendored
Normal file
163
static/bower_components/ion.rangeSlider/history.md
vendored
Normal file
@@ -0,0 +1,163 @@
|
||||
|
||||
|
||||
# Update History
|
||||
|
||||
### Version 2.3.0. December 11, 2018
|
||||
* Website update
|
||||
* Big skins update
|
||||
* Minor bugfixes
|
||||
|
||||
### Version 2.2.0. June 21, 2017
|
||||
* Slider has `TabIndex` support now. Issue #321
|
||||
* `keyboard_step` option removed as confusing.
|
||||
* `keyboard` controls are enabled by default now
|
||||
* `keyboard` movement is bind to step now
|
||||
* Traverse extra class names to container. Issue #318
|
||||
* Prettified values added to `result object`. Issue #356
|
||||
* It is possible to pass `scope` for callbacks now. Issue #402
|
||||
* New option `block`. Light version of `disabled` but sliders value can be send with form. Issue #242
|
||||
|
||||
### Version 2.1.8. June 19, 2017
|
||||
* Issues resolved: #420, #423, #441, #464, #479
|
||||
|
||||
### Version 2.1.7. March 26, 2017
|
||||
* Issues: #438
|
||||
* Reverted: #390
|
||||
|
||||
### Version 2.1.6. December 27, 2016
|
||||
* Issues: #393, #406, #429, #431, #432
|
||||
|
||||
### Version 2.1.5. December 12, 2016
|
||||
* Issues: #331, #332, #333, #337, #338, #343, #358, #374, #380, #389, #390, #394, #411, #412, #413
|
||||
|
||||
### Version 2.1.4. April 27, 2016
|
||||
* Issues: #330, #369
|
||||
|
||||
### Version 2.1.3. April 10, 2016
|
||||
* Issues: #342, #350
|
||||
|
||||
### Version 2.1.2. October 13, 2015
|
||||
* Fixed bugs. Issues: #310, #312, #313, #316
|
||||
|
||||
### Version 2.1.1. September 21, 2015
|
||||
* Fixed bugs. Issues: #305
|
||||
* New features. Requests: #282
|
||||
|
||||
### Version 2.1.0. September 20, 2015
|
||||
* Fixed bugs. Issues: #288
|
||||
* New features. Requests: #281, #284, #286, #289
|
||||
* Some code refactoring
|
||||
* Code documentation updated
|
||||
|
||||
### Version 2.0.13. July 25, 2015
|
||||
* Fixed bugs. Issues: #208, #270, #273
|
||||
* New features. Requests: #233
|
||||
|
||||
### Version 2.0.12. July 10, 2015
|
||||
* Fixed more bugs. Issues: #247, #263, #265, #269
|
||||
|
||||
### Version 2.0.11. July 02, 2015
|
||||
* Fixed more bugs. Issues: #247, #253
|
||||
|
||||
### Version 2.0.10. June 06, 2015
|
||||
* Fixed rounding bug. Issue #247
|
||||
|
||||
### Version 2.0.9. May 30, 2015
|
||||
* Fixed critical bug. Issue #246
|
||||
|
||||
### Version 2.0.8. May 30, 2015
|
||||
* Fixed some bugs. Issues: #219, #228, #230, #245
|
||||
|
||||
### Version 2.0.7. May 26, 2015
|
||||
* Fixed memory issue: #220
|
||||
* Fixed CPU issue: #186
|
||||
* Merged PRs: #209, #226, #235
|
||||
|
||||
### Version 2.0.6. February 17, 2015
|
||||
* Issues done: #197
|
||||
* Fixed bug with broken From and To
|
||||
|
||||
### Version 2.0.5. February 13, 2015
|
||||
* Issues done: #193, #195, #201
|
||||
|
||||
### Version 2.0.4. February 12, 2015
|
||||
* Issues done: #174, #184
|
||||
* NPM support added
|
||||
* Readme files optimisations
|
||||
|
||||
### Version 2.0.3. December 29, 2014
|
||||
* Issues done: #160, #165, #166, #168, #170
|
||||
|
||||
### Version 2.0.2: December 02, 2014
|
||||
* Issues done: #143, #148, #153, #155, #159
|
||||
* API update.
|
||||
|
||||
### Version 2.0.1: November 15, 2014
|
||||
* Some bugs fixed
|
||||
* Some new methods
|
||||
|
||||
### Version 2.0.0: November 08, 2014
|
||||
* New Core
|
||||
* New API
|
||||
* Lot's of bug fixes
|
||||
* Many improvements
|
||||
* SPM support added
|
||||
|
||||
### Version 1.9.3: August 06, 2014
|
||||
* Bower support added
|
||||
|
||||
### Version 1.9.2: August 04, 2014
|
||||
* New param gridMargin
|
||||
* Issues done: #89, #94, #96, #97, #98, #103
|
||||
|
||||
### Version 1.9.1: April 15, 2014
|
||||
* Issues done: #81, #82, #85
|
||||
|
||||
### Version 1.9.0: March 16, 2014
|
||||
* Issues done: #65, #68, #70, #77, #78
|
||||
* New plugin description
|
||||
* New demos design
|
||||
* Some new slider params
|
||||
|
||||
### Version 1.8.5: January 12, 2014
|
||||
* Issues done: #12, #30, #33, #43, #47, #52, #58
|
||||
* Bug fixes
|
||||
* New param "disable"
|
||||
* Link to input and slider in all callbacks
|
||||
* Click on slider to move it
|
||||
|
||||
### Version 1.8.2: October 31, 2013
|
||||
* Issues done: #13, #31, #35, #37, #40
|
||||
* Some code optimisations
|
||||
|
||||
### Version 1.8.1: October 10, 2013
|
||||
* Issues done: #25
|
||||
* New Flat UI Skin
|
||||
* Some skin optimisations
|
||||
|
||||
### Version 1.8.0: October 08, 2013
|
||||
* Issues done: #20, #21, #23, #24, #26
|
||||
* Removed hideText option
|
||||
* New method and options
|
||||
* Improved code style
|
||||
* Minor optimisations
|
||||
|
||||
### Version 1.7.2: September 11, 2013
|
||||
* Issues done: #15, #16
|
||||
* Fixed bug on Android-devices
|
||||
* Added support for negative and fractional values
|
||||
|
||||
### Version 1.7.0: August 23, 2013
|
||||
* Issues done: #7, #8, #9, #10
|
||||
* Some enhancements
|
||||
|
||||
### Version 1.6.3: July 29, 2013
|
||||
* Issues done: #2
|
||||
* Moved to Semantic Versioning
|
||||
|
||||
### December, 2012
|
||||
* Plugin release
|
||||
|
||||
***
|
||||
|
||||
[Support the plugin on Patreon](https://www.patreon.com/IonDen)
|
||||
63
static/bower_components/ion.rangeSlider/index.md
vendored
Normal file
63
static/bower_components/ion.rangeSlider/index.md
vendored
Normal file
@@ -0,0 +1,63 @@
|
||||
|
||||
|
||||
> English description | <a href="readme.ru.md">Описание на русском</a>
|
||||
|
||||
Ion.RangeSlider. Is an easy, flexible and responsive range slider with tons of options.
|
||||
|
||||
***
|
||||
|
||||
* Version: 2.2.0 | *Version 3.x is under development now*
|
||||
* <a href="http://ionden.com/a/plugins/ion.rangeSlider/en.html">Project page and demos</a>
|
||||
* <a href="http://ionden.com/a/plugins/ion.rangeSlider/ion.rangeSlider-2.2.0.zip">Download ZIP</a>
|
||||
|
||||
[](https://pledgie.com/campaigns/25694)
|
||||
|
||||
## Description
|
||||
* Ion.RangeSlider — cool, comfortable, responsive and easily customizable range slider
|
||||
* Supports events and public methods, has flexible settings, can be completely altered with CSS
|
||||
* Cross-browser: Google Chrome, Mozilla Firefox 3.6+, Opera 12+, Safari 5+, Internet Explorer 8+
|
||||
* Ion.RangeSlider supports touch-devices (iPhone, iPad, Nexus, etc.).
|
||||
* Ion.RangeSlider freely distributed under terms of <a href="http://ionden.com/a/plugins/licence.html" target="_blank">MIT licence</a>.
|
||||
* With this plugin you will be able to build beautiful range sliders, like this:
|
||||
|
||||
|
||||
|
||||
## Key features
|
||||
* Skin support. (5 skins included and PSD for skin creation)
|
||||
* Any number of sliders at one page without conflicts and big performance problems
|
||||
* Two slider types single (1 slider) and double (2 sliders)
|
||||
* Support of negative and fractional values
|
||||
* Ability to set custom step and snap grid to step
|
||||
* Support of custom values diapason
|
||||
* Customisable grid of values
|
||||
* Ability to disable UI elements (min and max, current value, grid)
|
||||
* Postfixes and prefixes for your numbers ($20, 20 € etc.)
|
||||
* Additional postfix for maximum value (eg. $0 — $100<b>+</b>)
|
||||
* Ability to prettify large numbers (eg. 10000000 -> 10 000 000 or 10.000.000)
|
||||
* Slider writes its value right into input value field. This makes it easy to use in any html form
|
||||
* Any slider value can be set through input data-attribute (eg. data-min="10")
|
||||
* Slider supports disable param. You can set it true to make slider inactive
|
||||
* Slider supports external methods (update, reset and remove) to control it after creation
|
||||
* For advanced users slider has callbacks (onStart, onChange, onFinish, onUpdate). Slider pastes all its params to callback first argument as object
|
||||
* Slider supports date and time
|
||||
|
||||
|
||||
## Demos
|
||||
|
||||
* <a href="http://ionden.com/a/plugins/ion.rangeSlider/demo.html" class="switch__item">Basic demo</a>
|
||||
* <a href="http://ionden.com/a/plugins/ion.rangeSlider/demo_advanced.html" class="switch__item">Advanced demo</a>
|
||||
* <a href="http://ionden.com/a/plugins/ion.rangeSlider/demo_interactions.html" class="switch__item">Interactions demo</a>
|
||||
|
||||
|
||||
## GitHub
|
||||
|
||||
* <a href="https://github.com/IonDen/ion.rangeSlider">GitHub page</a>
|
||||
|
||||
|
||||
### <a href="history.md">Update history</a>
|
||||
|
||||
***
|
||||
|
||||
Support the plugin:
|
||||
|
||||
[Support the plugin on Patreon](https://www.patreon.com/IonDen)
|
||||
2449
static/bower_components/ion.rangeSlider/js/ion.rangeSlider.js
vendored
Normal file
2449
static/bower_components/ion.rangeSlider/js/ion.rangeSlider.js
vendored
Normal file
File diff suppressed because it is too large
Load Diff
2
static/bower_components/ion.rangeSlider/js/ion.rangeSlider.min.js
vendored
Normal file
2
static/bower_components/ion.rangeSlider/js/ion.rangeSlider.min.js
vendored
Normal file
File diff suppressed because one or more lines are too long
145
static/bower_components/ion.rangeSlider/less/_base.less
vendored
Normal file
145
static/bower_components/ion.rangeSlider/less/_base.less
vendored
Normal file
@@ -0,0 +1,145 @@
|
||||
@import (reference) "_mixins";
|
||||
|
||||
.irs {
|
||||
.pos-r();
|
||||
-webkit-touch-callout: none;
|
||||
.no-click();
|
||||
font-size: 12px;
|
||||
font-family: Arial, sans-serif;
|
||||
|
||||
&-line {
|
||||
.pos-r();
|
||||
overflow: hidden;
|
||||
outline: none !important;
|
||||
}
|
||||
|
||||
&-bar {
|
||||
.pos-a();
|
||||
left: 0;
|
||||
width: 0;
|
||||
}
|
||||
|
||||
&-shadow {
|
||||
position: absolute;
|
||||
display: none;
|
||||
left: 0;
|
||||
width: 0;
|
||||
}
|
||||
|
||||
&-handle {
|
||||
.pos-a();
|
||||
box-sizing: border-box;
|
||||
cursor: default;
|
||||
z-index: 1;
|
||||
|
||||
&.single,
|
||||
&.from,
|
||||
&.to {}
|
||||
|
||||
&.type_last {
|
||||
z-index: 2;
|
||||
}
|
||||
}
|
||||
|
||||
&-min,
|
||||
&-max {
|
||||
.pos-a();
|
||||
cursor: default;
|
||||
}
|
||||
|
||||
&-min {
|
||||
left: 0;
|
||||
}
|
||||
|
||||
&-max {
|
||||
right: 0;
|
||||
}
|
||||
|
||||
&-from,
|
||||
&-to,
|
||||
&-single {
|
||||
.pos-a();
|
||||
top: 0;
|
||||
left: 0;
|
||||
cursor: default;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
&-grid {
|
||||
position: absolute;
|
||||
display: none;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 20px;
|
||||
|
||||
.irs-with-grid & {
|
||||
display: block;
|
||||
}
|
||||
|
||||
&-pol {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 1px;
|
||||
height: 8px;
|
||||
background: #000;
|
||||
|
||||
&.small {
|
||||
height: 4px;
|
||||
}
|
||||
}
|
||||
|
||||
&-text {
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
white-space: nowrap;
|
||||
text-align: center;
|
||||
font-size: 9px;
|
||||
line-height: 9px;
|
||||
padding: 0 3px;
|
||||
color: #000;
|
||||
}
|
||||
}
|
||||
|
||||
&-disable-mask {
|
||||
.pos-a();
|
||||
top: 0;
|
||||
left: -1%;
|
||||
width: 102%;
|
||||
height: 100%;
|
||||
cursor: default;
|
||||
background: rgba(0,0,0,0.0);
|
||||
z-index: 2;
|
||||
|
||||
.lt-ie9 & {
|
||||
background: #000;
|
||||
filter: alpha(opacity=0);
|
||||
cursor: not-allowed;
|
||||
}
|
||||
}
|
||||
|
||||
&-disabled {
|
||||
opacity: 0.4;
|
||||
}
|
||||
|
||||
&-hidden-input {
|
||||
position: absolute !important;
|
||||
display: block !important;
|
||||
top: 0 !important;
|
||||
left: 0 !important;
|
||||
width: 0 !important;
|
||||
height: 0 !important;
|
||||
font-size: 0 !important;
|
||||
line-height: 0 !important;
|
||||
padding: 0 !important;
|
||||
margin: 0 !important;
|
||||
overflow: hidden;
|
||||
outline: none !important;
|
||||
z-index: -9999 !important;
|
||||
background: none !important;
|
||||
border-style: solid !important;
|
||||
border-color: transparent !important;
|
||||
}
|
||||
}
|
||||
17
static/bower_components/ion.rangeSlider/less/_mixins.less
vendored
Normal file
17
static/bower_components/ion.rangeSlider/less/_mixins.less
vendored
Normal file
@@ -0,0 +1,17 @@
|
||||
.no-click () {
|
||||
-webkit-user-select: none;
|
||||
-khtml-user-select: none;
|
||||
-moz-user-select: none;
|
||||
-ms-user-select: none;
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
.pos-r () {
|
||||
position: relative;
|
||||
display: block;
|
||||
}
|
||||
|
||||
.pos-a () {
|
||||
position: absolute;
|
||||
display: block;
|
||||
}
|
||||
10
static/bower_components/ion.rangeSlider/less/irs.less
vendored
Normal file
10
static/bower_components/ion.rangeSlider/less/irs.less
vendored
Normal file
@@ -0,0 +1,10 @@
|
||||
// Base styles
|
||||
@import "_base";
|
||||
|
||||
// Skins styles
|
||||
@import "skins/flat";
|
||||
@import "skins/big";
|
||||
@import "skins/modern";
|
||||
@import "skins/sharp";
|
||||
@import "skins/round";
|
||||
@import "skins/square";
|
||||
109
static/bower_components/ion.rangeSlider/less/skins/big.less
vendored
Normal file
109
static/bower_components/ion.rangeSlider/less/skins/big.less
vendored
Normal file
@@ -0,0 +1,109 @@
|
||||
.irs--big {
|
||||
@name: irs;
|
||||
|
||||
@top: 33px;
|
||||
@bottom: 16px;
|
||||
@line_height: 12px;
|
||||
@handle_width: 30px;
|
||||
@handle_height: 30px;
|
||||
@custom_radius: 3px;
|
||||
|
||||
@line_color_1: white;
|
||||
@line_color_2: #ccc;
|
||||
@line_color_3: #ddd;
|
||||
@bar_color: #428bca;
|
||||
@handle_color_1: #cbcfd5;
|
||||
@handle_color_2: #B4B9BE;
|
||||
@handle_color_3: white;
|
||||
@handle_color_4: #919BA5;
|
||||
@minmax_text_color: white;
|
||||
@minmax_bg_color: #9f9f9f;
|
||||
@label_color_1: #428bca;
|
||||
@label_color_2: white;
|
||||
@grid_color_1: #428bca;
|
||||
|
||||
|
||||
|
||||
height: 55px;
|
||||
|
||||
&.irs-with-grid {
|
||||
height: 70px;
|
||||
}
|
||||
|
||||
.@{name}-line {
|
||||
top: @top;
|
||||
height: @line_height;
|
||||
background-color: @line_color_1;
|
||||
background: linear-gradient(to bottom, @line_color_3 -50%, @line_color_1 150%);
|
||||
border: 1px solid @line_color_2;
|
||||
border-radius: @line_height;
|
||||
}
|
||||
|
||||
.@{name}-bar {
|
||||
top: @top;
|
||||
height: @line_height;
|
||||
background-color: lighten(@bar_color, 20%);
|
||||
border: 1px solid @bar_color;
|
||||
background: linear-gradient(to bottom, lighten(@bar_color, 70%) 0%, @bar_color 30%, lighten(@bar_color, 30%) 100%);
|
||||
box-shadow: inset 0 0 1px 1px rgba(255,255,255,0.5);
|
||||
|
||||
&--single {
|
||||
border-radius: @line_height 0 0 @line_height;
|
||||
}
|
||||
}
|
||||
|
||||
.@{name}-shadow {
|
||||
height: 1px;
|
||||
bottom: @bottom;
|
||||
background-color: fade(@bar_color, 50%);
|
||||
}
|
||||
|
||||
.@{name}-handle {
|
||||
top: 25px;
|
||||
width: @handle_width;
|
||||
height: @handle_height;
|
||||
border: 1px solid rgba(0,0,0,0.3);
|
||||
background-color: @handle_color_1;
|
||||
background: linear-gradient(to bottom, @handle_color_3 0%, @handle_color_2 30%, @handle_color_3 100%);
|
||||
box-shadow: 1px 1px 2px rgba(0,0,0,0.2), inset 0 0 3px 1px @handle_color_3;
|
||||
border-radius: @handle_width;
|
||||
|
||||
&.state_hover,
|
||||
&:hover {
|
||||
border-color: rgba(0,0,0,0.45);
|
||||
background-color: darken(@handle_color_1, 20%);
|
||||
background: linear-gradient(to bottom, @handle_color_3 0%, @handle_color_4 30%, @handle_color_3 100%);
|
||||
}
|
||||
}
|
||||
|
||||
.@{name}-min,
|
||||
.@{name}-max {
|
||||
top: 0;
|
||||
padding: 1px 5px;
|
||||
color: @minmax_text_color;
|
||||
text-shadow: none;
|
||||
background-color: @minmax_bg_color;
|
||||
border-radius: @custom_radius;
|
||||
}
|
||||
|
||||
.@{name}-from,
|
||||
.@{name}-to,
|
||||
.@{name}-single {
|
||||
color: @label_color_2;
|
||||
text-shadow: none;
|
||||
padding: 1px 5px;
|
||||
background-color: @label_color_1;
|
||||
background: linear-gradient(to bottom, @label_color_1 0%, darken(@label_color_1, 10%) 100%);
|
||||
border-radius: @custom_radius;
|
||||
}
|
||||
|
||||
.@{name}-grid {
|
||||
&-pol {
|
||||
background-color: @grid_color_1;
|
||||
}
|
||||
|
||||
&-text {
|
||||
color: @grid_color_1;
|
||||
}
|
||||
}
|
||||
}
|
||||
125
static/bower_components/ion.rangeSlider/less/skins/flat.less
vendored
Normal file
125
static/bower_components/ion.rangeSlider/less/skins/flat.less
vendored
Normal file
@@ -0,0 +1,125 @@
|
||||
.irs--flat {
|
||||
@name: irs;
|
||||
|
||||
@top: 25px;
|
||||
@bottom: 16px;
|
||||
@line_height: 12px;
|
||||
@handle_width: 16px;
|
||||
@handle_height: 18px;
|
||||
@custom_radius: 4px;
|
||||
|
||||
@line_color: #e1e4e9;
|
||||
@bar_color: #ed5565;
|
||||
@handle_color_1: #da4453;
|
||||
@handle_color_2: #a43540;
|
||||
@minmax_text_color: #999;
|
||||
@minmax_bg_color: #e1e4e9;
|
||||
@label_color_1: #ed5565;
|
||||
@label_color_2: white;
|
||||
@grid_color_1: #e1e4e9;
|
||||
@grid_color_2: #999;
|
||||
|
||||
|
||||
|
||||
height: 40px;
|
||||
|
||||
&.irs-with-grid {
|
||||
height: 60px;
|
||||
}
|
||||
|
||||
.@{name}-line {
|
||||
top: @top;
|
||||
height: @line_height;
|
||||
background-color: @line_color;
|
||||
border-radius: @custom_radius;
|
||||
}
|
||||
|
||||
.@{name}-bar {
|
||||
top: @top;
|
||||
height: @line_height;
|
||||
background-color: @bar_color;
|
||||
|
||||
&--single {
|
||||
border-radius: @custom_radius 0 0 @custom_radius;
|
||||
}
|
||||
}
|
||||
|
||||
.@{name}-shadow {
|
||||
height: 1px;
|
||||
bottom: @bottom;
|
||||
background-color: @line_color;
|
||||
}
|
||||
|
||||
.@{name}-handle {
|
||||
top: 22px;
|
||||
width: @handle_width;
|
||||
height: @handle_height;
|
||||
background-color: transparent;
|
||||
|
||||
& > i:first-child {
|
||||
position: absolute;
|
||||
display: block;
|
||||
top: 0;
|
||||
left: 50%;
|
||||
width: 2px;
|
||||
height: 100%;
|
||||
margin-left: -1px;
|
||||
background-color: @handle_color_1;
|
||||
}
|
||||
|
||||
&.state_hover,
|
||||
&:hover {
|
||||
& > i:first-child {
|
||||
background-color: @handle_color_2;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.@{name}-min,
|
||||
.@{name}-max {
|
||||
top: 0;
|
||||
padding: 1px 3px;
|
||||
color: @minmax_text_color;
|
||||
font-size: 10px;
|
||||
line-height: 1.333;
|
||||
text-shadow: none;
|
||||
background-color: @minmax_bg_color;
|
||||
border-radius: @custom_radius;
|
||||
}
|
||||
|
||||
.@{name}-from,
|
||||
.@{name}-to,
|
||||
.@{name}-single {
|
||||
color: @label_color_2;
|
||||
font-size: 10px;
|
||||
line-height: 1.333;
|
||||
text-shadow: none;
|
||||
padding: 1px 5px;
|
||||
background-color: @label_color_1;
|
||||
border-radius: @custom_radius;
|
||||
|
||||
&:before {
|
||||
position: absolute;
|
||||
display: block;
|
||||
content: "";
|
||||
bottom: -6px;
|
||||
left: 50%;
|
||||
width: 0;
|
||||
height: 0;
|
||||
margin-left: -3px;
|
||||
overflow: hidden;
|
||||
border: 3px solid transparent;
|
||||
border-top-color: @label_color_1;
|
||||
}
|
||||
}
|
||||
|
||||
.@{name}-grid {
|
||||
&-pol {
|
||||
background-color: @grid_color_1;
|
||||
}
|
||||
|
||||
&-text {
|
||||
color: @grid_color_2;
|
||||
}
|
||||
}
|
||||
}
|
||||
165
static/bower_components/ion.rangeSlider/less/skins/modern.less
vendored
Normal file
165
static/bower_components/ion.rangeSlider/less/skins/modern.less
vendored
Normal file
@@ -0,0 +1,165 @@
|
||||
.irs--modern {
|
||||
@name: irs;
|
||||
|
||||
@top: 25px;
|
||||
@bottom: 21px;
|
||||
@line_height: 5px;
|
||||
@handle_width: 12px;
|
||||
@handle_height: 13px;
|
||||
|
||||
@line_color: #d1d6e0;
|
||||
@bar_color: #20b426;
|
||||
@handle_color_1: #e9e6e6;
|
||||
@handle_color_2: white;
|
||||
@handle_color_3: black;
|
||||
@minmax_text_color: white;
|
||||
@minmax_bg_color: #d1d6e0;
|
||||
@label_color_1: #20b426;
|
||||
@label_color_2: white;
|
||||
@grid_color_1: #dedede;
|
||||
@grid_color_2: silver;
|
||||
|
||||
|
||||
|
||||
height: 55px;
|
||||
|
||||
&.irs-with-grid {
|
||||
height: 55px;
|
||||
}
|
||||
|
||||
.@{name}-line {
|
||||
top: @top;
|
||||
height: @line_height;
|
||||
background-color: @line_color;
|
||||
background: linear-gradient(to bottom, lighten(@line_color, 5%) 0%, @line_color 100%);
|
||||
border: 1px solid darken(@line_color, 15%);
|
||||
border-bottom-width: 0;
|
||||
border-radius: @line_height;
|
||||
}
|
||||
|
||||
.@{name}-bar {
|
||||
top: @top;
|
||||
height: @line_height;
|
||||
background: @bar_color;
|
||||
background: linear-gradient(to bottom, @bar_color 0%, darken(@bar_color, 10%) 100%);
|
||||
|
||||
&--single {
|
||||
border-radius: @line_height 0 0 @line_height;
|
||||
}
|
||||
}
|
||||
|
||||
.@{name}-shadow {
|
||||
height: 1px;
|
||||
bottom: @bottom;
|
||||
background-color: fade(@line_color, 50%);
|
||||
}
|
||||
|
||||
.@{name}-handle {
|
||||
top: 37px;
|
||||
width: @handle_width;
|
||||
height: @handle_height;
|
||||
border: 1px solid darken(@line_color, 15%);
|
||||
border-top-width: 0;
|
||||
box-shadow: 1px 1px 1px rgba(0,0,0,0.1);
|
||||
border-radius: 0 0 3px 3px;
|
||||
|
||||
& > i:nth-child(1) {
|
||||
position: absolute;
|
||||
display: block;
|
||||
top: -4px; left: 1px;
|
||||
width: (@handle_width - 6px);
|
||||
height: (@handle_width - 6px);
|
||||
border: 1px solid darken(@line_color, 15%);
|
||||
background: @handle_color_2;
|
||||
transform: rotate(45deg);
|
||||
}
|
||||
|
||||
& > i:nth-child(2) {
|
||||
position: absolute;
|
||||
display: block;
|
||||
box-sizing: border-box;
|
||||
top: 0; left: 0;
|
||||
width: (@handle_width - 2);
|
||||
height: (@handle_height - 1);
|
||||
background: @handle_color_1;
|
||||
background: linear-gradient(to bottom, @handle_color_2 0%, @handle_color_1 100%);
|
||||
border-radius: 0 0 3px 3px;
|
||||
}
|
||||
|
||||
& > i:nth-child(3) {
|
||||
position: absolute;
|
||||
display: block;
|
||||
box-sizing: border-box;
|
||||
top: 3px; left: 3px;
|
||||
width: 4px; height: 5px;
|
||||
border-left: 1px solid darken(@line_color, 15%);
|
||||
border-right: 1px solid darken(@line_color, 15%);
|
||||
}
|
||||
|
||||
&.state_hover,
|
||||
&:hover {
|
||||
border-color: darken(@line_color, 30%);
|
||||
background: #c3c7cd;
|
||||
background: linear-gradient(to bottom, rgba(255,255,255,1) 0%,rgba(145,155,165,1) 30%,rgba(255,255,255,1) 100%);
|
||||
|
||||
& > i:nth-child(1) {
|
||||
border-color: darken(@line_color, 30%);
|
||||
}
|
||||
|
||||
& > i:nth-child(3) {
|
||||
border-color: darken(@line_color, 50%);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.@{name}-min,
|
||||
.@{name}-max {
|
||||
top: 0;
|
||||
font-size: 10px;
|
||||
line-height: 1.333;
|
||||
text-shadow: none;
|
||||
padding: 1px 5px;
|
||||
color: @minmax_text_color;
|
||||
background-color: @minmax_bg_color;
|
||||
border-radius: @line_height;
|
||||
}
|
||||
|
||||
.@{name}-from,
|
||||
.@{name}-to,
|
||||
.@{name}-single {
|
||||
font-size: 10px;
|
||||
line-height: 1.333;
|
||||
text-shadow: none;
|
||||
padding: 1px 5px;
|
||||
background-color: @label_color_1;
|
||||
color: @label_color_2;
|
||||
border-radius: @line_height;
|
||||
|
||||
&:before {
|
||||
position: absolute;
|
||||
display: block;
|
||||
content: "";
|
||||
bottom: -6px;
|
||||
left: 50%;
|
||||
width: 0;
|
||||
height: 0;
|
||||
margin-left: -3px;
|
||||
overflow: hidden;
|
||||
border: 3px solid transparent;
|
||||
border-top-color: @label_color_1;
|
||||
}
|
||||
}
|
||||
|
||||
.@{name}-grid {
|
||||
height: 25px;
|
||||
|
||||
&-pol {
|
||||
background-color: @grid_color_1;
|
||||
}
|
||||
|
||||
&-text {
|
||||
color: @grid_color_2;
|
||||
font-size: 13px;
|
||||
}
|
||||
}
|
||||
}
|
||||
120
static/bower_components/ion.rangeSlider/less/skins/round.less
vendored
Normal file
120
static/bower_components/ion.rangeSlider/less/skins/round.less
vendored
Normal file
@@ -0,0 +1,120 @@
|
||||
// Skin design by Veaceslav Grimalschi
|
||||
// https://github.com/grimalschi
|
||||
|
||||
.irs--round {
|
||||
@name: irs;
|
||||
|
||||
@top: 36px;
|
||||
@bottom: 21px;
|
||||
@line_height: 4px;
|
||||
@handle_width: 24px;
|
||||
@handle_height: 24px;
|
||||
|
||||
@line_color: #dee4ec;
|
||||
@bar_color: #006cfa;
|
||||
@handle_color_1: #006cfa;
|
||||
@handle_color_2: white;
|
||||
@handle_color_3: #f0f6ff;
|
||||
@minmax_text_color: #333;
|
||||
@minmax_bg_color: rgba(0,0,0,0.1);
|
||||
@label_color_1: #006cfa;
|
||||
@label_color_2: white;
|
||||
@grid_color_1: #dedede;
|
||||
@grid_color_2: silver;
|
||||
|
||||
|
||||
|
||||
height: 50px;
|
||||
|
||||
&.irs-with-grid {
|
||||
height: 65px;
|
||||
}
|
||||
|
||||
.@{name}-line {
|
||||
top: @top;
|
||||
height: @line_height;
|
||||
background-color: @line_color;
|
||||
border-radius: @line_height;
|
||||
}
|
||||
|
||||
.@{name}-bar {
|
||||
top: @top;
|
||||
height: @line_height;
|
||||
background-color: @bar_color;
|
||||
|
||||
&--single {
|
||||
border-radius: @line_height 0 0 @line_height;
|
||||
}
|
||||
}
|
||||
|
||||
.@{name}-shadow {
|
||||
height: 4px;
|
||||
bottom: @bottom;
|
||||
background-color: fade(@line_color, 50%);
|
||||
}
|
||||
|
||||
.@{name}-handle {
|
||||
top: 26px;
|
||||
width: @handle_width;
|
||||
height: @handle_height;
|
||||
border: 4px solid @handle_color_1;
|
||||
background-color: @handle_color_2;
|
||||
border-radius: @handle_width;
|
||||
box-shadow: 0 1px 3px rgba(0, 0, 255, 0.3);
|
||||
|
||||
&.state_hover,
|
||||
&:hover {
|
||||
background-color: @handle_color_3;
|
||||
}
|
||||
}
|
||||
|
||||
.@{name}-min,
|
||||
.@{name}-max {
|
||||
color: @minmax_text_color;
|
||||
font-size: 14px;
|
||||
line-height: 1;
|
||||
top: 0;
|
||||
padding: 3px 5px;
|
||||
background-color: @minmax_bg_color;
|
||||
border-radius: @line_height;
|
||||
}
|
||||
|
||||
.@{name}-from,
|
||||
.@{name}-to,
|
||||
.@{name}-single {
|
||||
font-size: 14px;
|
||||
line-height: 1;
|
||||
text-shadow: none;
|
||||
padding: 3px 5px;
|
||||
background-color: @label_color_1;
|
||||
color: @label_color_2;
|
||||
border-radius: @line_height;
|
||||
|
||||
&:before {
|
||||
position: absolute;
|
||||
display: block;
|
||||
content: "";
|
||||
bottom: -6px;
|
||||
left: 50%;
|
||||
width: 0;
|
||||
height: 0;
|
||||
margin-left: -3px;
|
||||
overflow: hidden;
|
||||
border: 3px solid transparent;
|
||||
border-top-color: @label_color_1;
|
||||
}
|
||||
}
|
||||
|
||||
.@{name}-grid {
|
||||
height: 25px;
|
||||
|
||||
&-pol {
|
||||
background-color: @grid_color_1;
|
||||
}
|
||||
|
||||
&-text {
|
||||
color: @grid_color_2;
|
||||
font-size: 13px;
|
||||
}
|
||||
}
|
||||
}
|
||||
132
static/bower_components/ion.rangeSlider/less/skins/sharp.less
vendored
Normal file
132
static/bower_components/ion.rangeSlider/less/skins/sharp.less
vendored
Normal file
@@ -0,0 +1,132 @@
|
||||
.irs--sharp {
|
||||
@name: irs;
|
||||
|
||||
@top: 30px;
|
||||
@bottom: 21px;
|
||||
@line_height: 2px;
|
||||
@handle_width: 10px;
|
||||
@handle_height: 10px;
|
||||
|
||||
@line_color: black;
|
||||
@bar_color: #ee22fa;
|
||||
@handle_color_1: darken(#ee22fa, 20%);
|
||||
@handle_color_2: white;
|
||||
@handle_color_3: black;
|
||||
@minmax_text_color: white;
|
||||
@minmax_bg_color: darken(#ee22fa, 20%);
|
||||
@label_color_1: darken(#ee22fa, 20%);
|
||||
@label_color_2: white;
|
||||
@grid_color_1: #dedede;
|
||||
@grid_color_2: silver;
|
||||
|
||||
|
||||
|
||||
height: 50px;
|
||||
font-size: 12px;
|
||||
line-height: 1;
|
||||
|
||||
&.irs-with-grid {
|
||||
height: 57px;
|
||||
}
|
||||
|
||||
.@{name}-line {
|
||||
top: @top;
|
||||
height: @line_height;
|
||||
background-color: @line_color;
|
||||
border-radius: @line_height;
|
||||
}
|
||||
|
||||
.@{name}-bar {
|
||||
top: @top;
|
||||
height: @line_height;
|
||||
background-color: @bar_color;
|
||||
|
||||
&--single {
|
||||
border-radius: @line_height 0 0 @line_height;
|
||||
}
|
||||
}
|
||||
|
||||
.@{name}-shadow {
|
||||
height: 1px;
|
||||
bottom: @bottom;
|
||||
background-color: fade(@line_color, 50%);
|
||||
}
|
||||
|
||||
.@{name}-handle {
|
||||
top: (@top - 5px);
|
||||
width: @handle_width;
|
||||
height: @handle_height;
|
||||
background-color: @handle_color_1;
|
||||
|
||||
& > i:first-child {
|
||||
position: absolute;
|
||||
display: block;
|
||||
top: 100%;
|
||||
left: 0;
|
||||
width: 0;
|
||||
height: 0;
|
||||
border: 5px solid transparent;
|
||||
border-top-color: @handle_color_1;
|
||||
}
|
||||
|
||||
&.state_hover,
|
||||
&:hover {
|
||||
background-color: @handle_color_3;
|
||||
|
||||
& > i:first-child {
|
||||
border-top-color: @handle_color_3;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.@{name}-min,
|
||||
.@{name}-max {
|
||||
color: @minmax_text_color;
|
||||
font-size: 14px;
|
||||
line-height: 1;
|
||||
top: 0;
|
||||
padding: 3px 4px;
|
||||
opacity: 0.4;
|
||||
background-color: @minmax_bg_color;
|
||||
border-radius: @line_height;
|
||||
}
|
||||
|
||||
.@{name}-from,
|
||||
.@{name}-to,
|
||||
.@{name}-single {
|
||||
font-size: 14px;
|
||||
line-height: 1;
|
||||
text-shadow: none;
|
||||
padding: 3px 4px;
|
||||
background-color: @label_color_1;
|
||||
color: @label_color_2;
|
||||
border-radius: @line_height;
|
||||
|
||||
&:before {
|
||||
position: absolute;
|
||||
display: block;
|
||||
content: "";
|
||||
bottom: -6px;
|
||||
left: 50%;
|
||||
width: 0;
|
||||
height: 0;
|
||||
margin-left: -3px;
|
||||
overflow: hidden;
|
||||
border: 3px solid transparent;
|
||||
border-top-color: @label_color_1;
|
||||
}
|
||||
}
|
||||
|
||||
.@{name}-grid {
|
||||
height: 25px;
|
||||
|
||||
&-pol {
|
||||
background-color: @grid_color_1;
|
||||
}
|
||||
|
||||
&-text {
|
||||
color: @grid_color_2;
|
||||
font-size: 13px;
|
||||
}
|
||||
}
|
||||
}
|
||||
100
static/bower_components/ion.rangeSlider/less/skins/square.less
vendored
Normal file
100
static/bower_components/ion.rangeSlider/less/skins/square.less
vendored
Normal file
@@ -0,0 +1,100 @@
|
||||
// Skin design by Veaceslav Grimalschi
|
||||
// https://github.com/grimalschi
|
||||
|
||||
.irs--square {
|
||||
@name: irs;
|
||||
|
||||
@top: 31px;
|
||||
@bottom: 21px;
|
||||
@line_height: 4px;
|
||||
@handle_width: 16px;
|
||||
@handle_height: 16px;
|
||||
|
||||
@line_color: #dedede;
|
||||
@bar_color: black;
|
||||
@handle_color_1: black;
|
||||
@handle_color_2: white;
|
||||
@handle_color_3: #f0f6ff;
|
||||
@minmax_text_color: #333;
|
||||
@minmax_bg_color: rgba(0,0,0,0.1);
|
||||
@label_color_1: black;
|
||||
@label_color_2: white;
|
||||
@grid_color_1: #dedede;
|
||||
@grid_color_2: silver;
|
||||
|
||||
|
||||
|
||||
height: 50px;
|
||||
|
||||
&.irs-with-grid {
|
||||
height: 60px;
|
||||
}
|
||||
|
||||
.@{name}-line {
|
||||
top: @top;
|
||||
height: @line_height;
|
||||
background-color: @line_color;
|
||||
}
|
||||
|
||||
.@{name}-bar {
|
||||
top: @top;
|
||||
height: @line_height;
|
||||
background-color: @bar_color;
|
||||
}
|
||||
|
||||
.@{name}-shadow {
|
||||
height: 2px;
|
||||
bottom: @bottom;
|
||||
background-color: @line_color;
|
||||
}
|
||||
|
||||
.@{name}-handle {
|
||||
top: (@top - 6px);
|
||||
width: @handle_width;
|
||||
height: @handle_height;
|
||||
border: 3px solid @handle_color_1;
|
||||
background-color: @handle_color_2;
|
||||
-webkit-transform: rotate(45deg);
|
||||
-ms-transform: rotate(45deg);
|
||||
transform: rotate(45deg);
|
||||
|
||||
&.state_hover,
|
||||
&:hover {
|
||||
background-color: @handle_color_3;
|
||||
}
|
||||
}
|
||||
|
||||
.@{name}-min,
|
||||
.@{name}-max {
|
||||
color: @minmax_text_color;
|
||||
font-size: 14px;
|
||||
line-height: 1;
|
||||
top: 0;
|
||||
padding: 3px 5px;
|
||||
background-color: @minmax_bg_color;
|
||||
}
|
||||
|
||||
.@{name}-from,
|
||||
.@{name}-to,
|
||||
.@{name}-single {
|
||||
font-size: 14px;
|
||||
line-height: 1;
|
||||
text-shadow: none;
|
||||
padding: 3px 5px;
|
||||
background-color: @label_color_1;
|
||||
color: @label_color_2;
|
||||
}
|
||||
|
||||
.@{name}-grid {
|
||||
height: 25px;
|
||||
|
||||
&-pol {
|
||||
background-color: @grid_color_1;
|
||||
}
|
||||
|
||||
&-text {
|
||||
color: @grid_color_2;
|
||||
font-size: 11px;
|
||||
}
|
||||
}
|
||||
}
|
||||
46
static/bower_components/ion.rangeSlider/package.json
vendored
Normal file
46
static/bower_components/ion.rangeSlider/package.json
vendored
Normal file
@@ -0,0 +1,46 @@
|
||||
{
|
||||
"name": "ion-rangeslider",
|
||||
"version": "2.3.0",
|
||||
"description": "Cool, comfortable and easily customizable range slider with many options and skin support",
|
||||
"homepage": "http://ionden.com/a/plugins/ion.rangeSlider/en.html",
|
||||
"author": {
|
||||
"name": "Denis Ineshin (IonDen)",
|
||||
"email": "ionden.tech@gmail.com",
|
||||
"url": "https://github.com/IonDen"
|
||||
},
|
||||
"keywords": [
|
||||
"jquery-plugin",
|
||||
"ecosystem:jquery",
|
||||
"jquery",
|
||||
"form",
|
||||
"input",
|
||||
"range",
|
||||
"slider",
|
||||
"rangeslider",
|
||||
"interface",
|
||||
"diapason",
|
||||
"ui",
|
||||
"noui",
|
||||
"skins"
|
||||
],
|
||||
"main": "./js/ion.rangeSlider.js",
|
||||
"directories": {
|
||||
"lib": "js"
|
||||
},
|
||||
"repository": {
|
||||
"type": "git",
|
||||
"url": "git://github.com/IonDen/ion.rangeSlider.git"
|
||||
},
|
||||
"bugs": {
|
||||
"url": "https://github.com/IonDen/ion.rangeSlider/issues"
|
||||
},
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"jquery": ">=1.8"
|
||||
},
|
||||
"ignore": [
|
||||
".idea",
|
||||
"PSD",
|
||||
"bower.json"
|
||||
]
|
||||
}
|
||||
273
static/bower_components/ion.rangeSlider/readme.md
vendored
Normal file
273
static/bower_components/ion.rangeSlider/readme.md
vendored
Normal file
@@ -0,0 +1,273 @@
|
||||
|
||||
|
||||
> English description | <a href="readme.ru.md">Описание на русском</a>
|
||||
|
||||
Ion.RangeSlider. Is an easy, flexible and responsive range slider with tons of options.
|
||||
|
||||
***
|
||||
|
||||
* Version: 2.3.0 | *Version 3.x is under development now*
|
||||
* <a href="http://ionden.com/a/plugins/ion.rangeSlider/en.html">Project page and demos</a>
|
||||
* <a href="http://ionden.com/a/plugins/ion.rangeSlider/ion.rangeSlider-2.3.0.zip">Download ZIP</a>
|
||||
|
||||
## Description
|
||||
* Ion.RangeSlider — cool, comfortable, responsive and easily customizable range slider
|
||||
* Supports events and public methods, has flexible settings, can be completely altered with CSS
|
||||
* Cross-browser: Google Chrome, Mozilla Firefox 3.6+, Opera 12+, Safari 5+, Internet Explorer 8+
|
||||
* Ion.RangeSlider supports touch-devices (iPhone, iPad, Nexus, etc.).
|
||||
* Ion.RangeSlider freely distributed under terms of <a href="http://ionden.com/a/plugins/licence.html" target="_blank">MIT licence</a>.
|
||||
* With this plugin you will be able to build beautiful range sliders, like this:
|
||||
|
||||
|
||||
|
||||
## Key features
|
||||
* Skin support. (6 skins included)
|
||||
* Any number of sliders at one page without conflicts and big performance problems
|
||||
* Two slider types single (1 slider) and double (2 sliders)
|
||||
* Support of negative and fractional values
|
||||
* Ability to set custom step and snap grid to step
|
||||
* Support of custom values diapason
|
||||
* Customisable grid of values
|
||||
* Ability to disable UI elements (min and max, current value, grid)
|
||||
* Postfixes and prefixes for your numbers ($20, 20 € etc.)
|
||||
* Additional postfix for maximum value (eg. $0 — $100<b>+</b>)
|
||||
* Ability to prettify large numbers (eg. 10000000 -> 10 000 000 or 10.000.000)
|
||||
* Slider writes its value right into input value field. This makes it easy to use in any html form
|
||||
* Any slider value can be set through input data-attribute (eg. data-min="10")
|
||||
* Slider supports disable param. You can set it true to make slider inactive
|
||||
* Slider supports external methods (update, reset and remove) to control it after creation
|
||||
* For advanced users slider has callbacks (onStart, onChange, onFinish, onUpdate). Slider pastes all its params to callback first argument as object
|
||||
* Slider supports date and time
|
||||
|
||||
|
||||
## Demos
|
||||
|
||||
* <a href="http://ionden.com/a/plugins/ion.rangeSlider/demo.html" class="switch__item">Basic demo</a>
|
||||
* <a href="http://ionden.com/a/plugins/ion.rangeSlider/demo_advanced.html" class="switch__item">Advanced demo</a>
|
||||
* <a href="http://ionden.com/a/plugins/ion.rangeSlider/demo_interactions.html" class="switch__item">Interactions demo</a>
|
||||
|
||||
|
||||
## Dependencies
|
||||
|
||||
* <a href="http://jquery.com/" target="_blank">jQuery 1.8.x+</a>
|
||||
|
||||
|
||||
## Usage
|
||||
|
||||
Add the following libraries to the page:
|
||||
* jQuery
|
||||
* ion.rangeSlider.min.js
|
||||
|
||||
Add the following stylesheets to the page:
|
||||
* ion.rangeSlider.min.css
|
||||
|
||||
## Install with bower
|
||||
|
||||
* bower install ionrangeslider
|
||||
|
||||
|
||||
## Install with npm
|
||||
|
||||
* npm install ion-rangeslider
|
||||
|
||||
|
||||
## Initialisation
|
||||
|
||||
The slider overrides a native text <code>input</code> element.
|
||||
```html
|
||||
<input type="text" id="example_id" name="example_name" value="" />
|
||||
```
|
||||
|
||||
To initialise the slider, call ionRangeSlider on the element:
|
||||
```javascript
|
||||
$("#example_id").ionRangeSlider();
|
||||
```
|
||||
|
||||
|
||||
## Demo for juniors
|
||||
|
||||
If your are new in web development and you are not sure how to correctly install the plugin to your web-page, please download
|
||||
<a href="http://ionden.com/a/plugins/ion.rangeSlider/ionRangeSliderDemo.zip" class="button">this demo example</a>
|
||||
|
||||
|
||||
## <a href="http://jsfiddle.net/IonDen/qv6yrjrv/" target="_blank">Experiments playground</a>
|
||||
|
||||
Here you can find bunch of advanced JSFIDDLE demos with different, non-standart use cases:
|
||||
* [Reverse or RTL](http://jsfiddle.net/IonDen/gbmszmp4/)
|
||||
* [1 handle bind to 1 input](http://jsfiddle.net/IonDen/mvrfg2vc/)
|
||||
* [2 handles bind to 2 inputs](http://jsfiddle.net/IonDen/r5aox84v/)
|
||||
* [2 sliders connected to each other](http://jsfiddle.net/IonDen/4k3d4y3s/)
|
||||
* [1st slider disables/enables 2nd slider](http://jsfiddle.net/IonDen/ctkouh69/)
|
||||
* [Non-linear slider](http://jsfiddle.net/IonDen/pzjaoxe7/)
|
||||
* [Plus and Minus buttons](http://jsfiddle.net/IonDen/wsk7y08a/)
|
||||
* [Calculating sum](http://codepen.io/anon/pen/QyzwJZ)
|
||||
* [Adding one more diapazon on 1 slider](http://jsfiddle.net/IonDen/st9eotpy/)
|
||||
* [Live editing of Min and Max values](http://jsfiddle.net/IonDen/wL8gq4py/)
|
||||
* [Prettify and transform values at the same time](http://jsfiddle.net/IonDen/j0tLzgq1/)
|
||||
* [Custom marks on slider](http://jsfiddle.net/IonDen/spez12kt/)
|
||||
* [Rendering money value n.nn](http://jsfiddle.net/IonDen/vrqqL2Lw/)
|
||||
* [Rendering Dates with Moment.js](http://jsfiddle.net/tvn2ckj2/)
|
||||
* [Changing step live](http://jsfiddle.net/IonDen/ca6ykae6/)
|
||||
* [Toggle slider](http://jsfiddle.net/IonDen/t936wtjv/)
|
||||
* [Using different skin color at the same time](http://jsfiddle.net/IonDen/2sruxk4e/)
|
||||
* [2 dependant sliders](http://jsfiddle.net/IonDen/n2sxswv2/)
|
||||
* [Skip some values](http://jsfiddle.net/IonDen/4qgq9bto/)
|
||||
* [Good Prettify example](http://jsfiddle.net/IonDen/bvbvr0xs/)
|
||||
|
||||
|
||||
## Settings
|
||||
|
||||
|
||||
| Option | Data-Attr | Defaults | Type | Description |
|
||||
| --- | --- | --- | --- | --- |
|
||||
| `skin` | `data-skin` | `flat` | string | Choose UI skin to use |
|
||||
| `type` | `data-type` | `single` | string | Choose slider type, could be `single` - for one handle, or `double` for two handles |
|
||||
| `min` | `data-min` | `10` | number | Set slider minimum value |
|
||||
| `max` | `data-max` | `100` | number | Set slider maximum value |
|
||||
| `from` | `data-from` | `min` | number | Set start position for left handle (or for single handle) |
|
||||
| `to` | `data-to` | `max` | number | Set start position for right handle |
|
||||
| `step` | `data-step` | `1` | number | Set sliders step. Always > 0. Could be fractional |
|
||||
| `min_interval` | `data-min-interval` | `-` | number | Set minimum diapason between sliders. Only for **double** type |
|
||||
| `max_interval` | `data-max-interval` | `-` | number | Set minimum maximum between sliders. Only for **double** type |
|
||||
| `drag_interval` | `data-drag-interval` | `false` | boolean | Allow user to drag whole range. Only for **double** type |
|
||||
| `values` | `data-values` | `[]` | array | Set up your own array of possible slider values. They could be numbers or strings. If the values array is set up, min, max and step param, can no longer be changed |
|
||||
| `from_fixed` | `data-from-fixed` | `false` | boolean | Fix position of left (or single) handle |
|
||||
| `from_min` | `data-from-min` | `min` | number | Set minimum limit for left (or single) handle |
|
||||
| `from_max` | `data-from-max` | `max` | number | Set maximum limit for left (or single) handle |
|
||||
| `from_shadow` | `data-from-shadow` | `false` | boolean | Highlight the limits for left handle |
|
||||
| `to_fixed` | `data-to-fixed` | `false` | boolean | Fix position of right handle |
|
||||
| `to_min` | `data-to-min` | `min` | number | Set minimum limit for right handle |
|
||||
| `to_max` | `data-to-max` | `max` | number | Set maximum limit for right handle |
|
||||
| `to_shadow` | `data-to-shadow` | `false` | boolean | Highlight the right handle |
|
||||
| `prettify_enabled` | `data-prettify-enabled` | `true` | boolean | Improve readability of long numbers: 10000000 → 10 000 000 |
|
||||
| `prettify_separator` | `data-prettify-separator` | ` ` | string | Set up your own separator for long numbers: 10000000 → 10,000,000 etc. |
|
||||
| `prettify` | `-` | `null` | function | Set up your own prettify function. Can be anything. For example, you can set up unix time as slider values and than transform them to cool looking dates |
|
||||
| `force_edges` | `data-force-edges` | `false` | boolean | Sliders handles and tooltips will be always inside it's container |
|
||||
| `keyboard` | `data-keyboard` | `true` | boolean | Activates keyboard controls. Move left: ←, ↓, A, S. Move right: →, ↑, W, D. |
|
||||
| `grid` | `data-grid` | `true` | boolean | Enables grid of values above the slider |
|
||||
| `grid_margin` | `data-grid-margin` | `true` | boolean | Set left and right grid gaps |
|
||||
| `grid_num` | `data-grid-num` | `4` | number | Number of grid units |
|
||||
| `grid_snap` | `data-grid-snap` | `false` | boolean | Snap grid to sliders step (step param). If activated, grid_num will not be used. Max steps = 50 |
|
||||
| `hide_min_max` | `data-hide-min-max` | `false` | boolean | Hides **min** and **max** labels |
|
||||
| `hide_from_to` | `data-hide-from-to` | `false` | boolean | Hides **from** and **to** labels |
|
||||
| `prefix` | `data-prefix` | `` | string | Set prefix for values. Will be set up right before the number: **$**100 |
|
||||
| `postfix` | `data-postfix` | `` | string | Set postfix for values. Will be set up right after the number: 100**k** |
|
||||
| `max_postfix` | `data-max-postfix` | `` | string | Special postfix, used only for maximum value. Will be showed after handle will reach maximum right position. For example **0 — 100+** |
|
||||
| `decorate_both` | `data-decorate-both` | `true` | boolean | Used for **double** type and only if prefix or postfix was set up. Determine how to decorate close values. For example: **$10k — $100k** or **$10 — 100k** |
|
||||
| `values_separator` | `data-decorate-both` | ` - ` | string | Set your own separator for close values. Used for **double** type. Default: **10 — 100**. Or you may set: **10 to 100, 10 + 100, 10 → 100** etc. |
|
||||
| `input_values_separator` | `data-input-values-separator` | ` ; ` | string | Separator for **double** values in input value property. `<input value="25;42">` |
|
||||
| `disable` | `data-disable` | `false` | boolean | Locks slider and makes it inactive. Input is disabled too. Invisible to forms |
|
||||
| `block` | `data-blokc` | `false` | boolean | Locks slider and makes it inactive. Input is NOT disabled. Can be send with forms |
|
||||
| `extra_classes` | `data-extra-classes` | `—` | string | Traverse extra CSS-classes to sliders container |
|
||||
| `scope` | `-` | `null` | object | Scope for callbacks. Pass any object |
|
||||
| `onStart` | `-` | `null` | function | Callback. Is called on slider start. Gets all slider data as a 1st attribute |
|
||||
| `onChange` | `-` | `null` | function | Callback. IS called on each values change. Gets all slider data as a 1st attribute |
|
||||
| `onFinish` | `-` | `null` | function | Callback. Is called when user releases handle. Gets all slider data as a 1st attribute |
|
||||
| `onUpdate` | `-` | `null` | function | Callback. Is called when slider is modified by external methods `update` or `reset` |
|
||||
|
||||
|
||||
|
||||
## Description of data passed to callbacks (onChange and etc.)
|
||||
Result is object type and passed to callback as first argument:
|
||||
```javascript
|
||||
Obj: {
|
||||
"input": object, // jQuery-link to input
|
||||
"slider": object, // jQuery-link to sliders container
|
||||
"min": 1000, // MIN value
|
||||
"max": 100000, // MAX values
|
||||
"from": 10000, // FROM value
|
||||
"from_percent": 10, // FROM value in percents
|
||||
"from_value": 0, // FROM index in values array (if used)
|
||||
"to": 90000, // TO value
|
||||
"to_percent": 90, // TO value in percents
|
||||
"to_value": 0, // TO index in values array (if used)
|
||||
"min_pretty": "1 000", // MIN prettified (if used)
|
||||
"max_pretty": "100 000", // MAX prettified (if used)
|
||||
"from_pretty": "10 000", // FROM prettified (if used)
|
||||
"to_pretty": "90 000" // TO prettified (if used)
|
||||
}
|
||||
```
|
||||
|
||||
## Creating slider (all params)
|
||||
An example of a customised slider:
|
||||
```javascript
|
||||
$("#example").ionRangeSlider({
|
||||
skin: "big",
|
||||
min: 0,
|
||||
max: 10000,
|
||||
from: 1000,
|
||||
to: 9000,
|
||||
type: 'double',
|
||||
prefix: "$",
|
||||
grid: true,
|
||||
grid_num: 10
|
||||
});
|
||||
```
|
||||
|
||||
You can also initialise slider with <code>data-*</code> attributes of input tag:
|
||||
```html
|
||||
data-min="0"
|
||||
data-max="10000"
|
||||
data-from="1000"
|
||||
data-to="9000"
|
||||
data-type="double"
|
||||
data-prefix="$"
|
||||
data-grid="true"
|
||||
data-grid-num="10"
|
||||
```
|
||||
|
||||
## Public methods
|
||||
|
||||
To use public methods, at first you must save slider instance to variable:
|
||||
```javascript
|
||||
// Launch plugin
|
||||
$("#range").ionRangeSlider({
|
||||
type: "double",
|
||||
min: 0,
|
||||
max: 1000,
|
||||
from: 200,
|
||||
to: 500,
|
||||
grid: true
|
||||
});
|
||||
|
||||
// Saving it's instance to var
|
||||
var slider = $("#range").data("ionRangeSlider");
|
||||
|
||||
// Fire public method
|
||||
slider.reset();
|
||||
```
|
||||
|
||||
There are 3 public methods:
|
||||
```javascript
|
||||
// UPDATE - updates slider to any new values
|
||||
slider.update({
|
||||
from: 300,
|
||||
to: 400
|
||||
});
|
||||
|
||||
// RESET - reset slider to it's first values
|
||||
slider.reset();
|
||||
|
||||
// DESTROY - destroys slider and restores original input field
|
||||
slider.destroy();
|
||||
```
|
||||
|
||||
|
||||
## One more look on demos
|
||||
|
||||
* <a href="http://ionden.com/a/plugins/ion.rangeSlider/demo.html" class="switch__item">Basic demo</a>
|
||||
* <a href="http://ionden.com/a/plugins/ion.rangeSlider/demo_advanced.html" class="switch__item">Advanced demo</a>
|
||||
* <a href="http://ionden.com/a/plugins/ion.rangeSlider/demo_interactions.html" class="switch__item">Interactions demo</a>
|
||||
|
||||
All plugins options are covered in demos.
|
||||
|
||||
|
||||
### <a href="history.md">Update history</a>
|
||||
|
||||
***
|
||||
|
||||
#### Support Ion-series plugins development:
|
||||
|
||||
* [Support the plugin on Patreon](https://www.patreon.com/IonDen)
|
||||
|
||||
* Donate direct to my Paypal account: https://www.paypal.me/IonDen
|
||||
Reference in New Issue
Block a user