├── .gitignore ├── LICENSE ├── README.md ├── demo ├── index.html ├── main.css ├── main.less ├── normalize.css └── prism │ ├── prism.css │ └── prism.js ├── jquery.range-min.js ├── jquery.range.css ├── jquery.range.js ├── jquery.range.less └── package.json /.gitignore: -------------------------------------------------------------------------------- 1 | .DS_Store 2 | *.codekit 3 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | The MIT License (MIT) 2 | 3 | Copyright (c) 2014 Nitin Hayaran 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | ## jQuery plugin to create Range Selector 2 | 3 | ![jRange Preview](http://i.imgur.com/da8uZwx.png) 4 | 5 | [Demo and Documentation](http://nitinhayaran.github.io/jRange/demo/) -------------------------------------------------------------------------------- /demo/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | jRange : jQuery Range Selector 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 |
15 |
16 |

jRange

17 |

jQuery Plugin to create Range Selector

18 |
19 | 32 |
33 |
34 |
35 |

See it in Action

36 |

Play around with the demo

37 |
38 |
39 |
40 | 
$('.single-slider').jRange({
 41 |     from: -2.0,
 42 |     to: 2.0,
 43 |     step: 0.5,
 44 |     scale: [-2.0,-1.0,0.0,1.0,2.0],
 45 |     format: '%s',
 46 |     width: 300,
 47 |     showLabels: true,
 48 |     snap: true
 49 | });
50 |
51 |
52 | 53 |
54 |
55 |
56 |
57 | 
$('.range-slider').jRange({
 58 |     from: 0,
 59 |     to: 100,
 60 |     step: 1,
 61 |     scale: [0,25,50,75,100],
 62 |     format: '%s',
 63 |     width: 300,
 64 |     showLabels: true,
 65 |     isRange : true
 66 | });
67 |
68 |
69 | 70 |
71 |
72 | 73 | 74 |
75 |
76 |

How to Use

77 |

Lets see some code

78 |

To get started you'll have to include jquery.range.js and jquery.range.css files in your html file.

79 | 
<link rel="stylesheet" href="jquery.range.css">
 80 | <script src="jquery.range.js"></script>
81 |

Later just add an hidden input, where ever you want this slider to be shown.

82 | 
<input type="hidden" class="slider-input" value="23" />
83 |

After this you'll have to intialize this plugin for that input, as shown in the example above

84 | 85 |

Options

86 |

See configuration options

87 |

Options can also be set programatically, by passing an options hash to the jRange method. 88 | 89 | 90 | 91 | 92 | 93 | 94 | 95 | 96 | 97 | 98 | 99 | 100 | 101 | 102 | 103 | 104 | 105 | 106 | 107 | 108 | 109 | 110 | 111 | 115 | 116 | 117 | 118 | 119 | 120 | 123 | 124 | 125 | 126 | 127 | 128 | 132 | 133 | 134 | 135 | 136 | 137 | 141 | 142 | 143 | 144 | 145 | 146 | 157 | 158 | 159 | 160 | 161 | 162 | 165 | 166 | 167 | 168 | 169 | 170 | 174 | 175 | 176 | 177 | 178 | 179 | 183 | 184 | 185 | 186 | 187 | 188 | 192 | 193 | 194 | 195 | 196 | 197 | 206 | 207 | 208 | 209 | 210 | 211 | 215 | 216 | 217 | 218 | 219 | 220 | 223 | 224 | 225 | 226 | 227 | 228 | 231 | 232 |
OptionOverrideTypeDetails
fromMandatoryIntegerLower bound of slider
toMandatoryIntegerUpper bound of slider
stepOptionalInteger 112 | Default : 1 113 |

amount of increment on each step

114 |
scaleOptionalArray 121 |

Array containing label which are shown below the slider. By default its [from, to].

122 |
showLabelsOptionalBoolean 129 |

False, if you'd like to hide label which are shown on top of slider.

130 | Default : true 131 |
showScaleOptionalBoolean 138 |

False, if you'd like to hide scale which are shown below the slider.

139 | Default : true 140 |
formatOptionalString / Function 147 |

this is used to show label on the pointer

148 | Default : "%s" 149 |

String : %s is replaced by its value, e.g., "%s days", "%s goats"

150 |

151 | Function : format(value, pointer) 152 |
153 | return : string label for a given value and pointer.
154 | pointer could be 'low'/'high' if isRange is true, else undefined 155 |

156 |
widthOptionalInteger 163 | Default : 300 164 |
themeOptionalString 171 | Default : "theme-green" 172 |

This is the css class name added to the container. Available themes are "theme-blue", "theme-green". You can also add more themes, just like in jquery.range.less

173 |
isRangeOptionalBoolean 180 | Default : false 181 |

True if this is a range selector. If its a range the value of hidden input will be set comma-seperated, e.g., "25,75"

182 |
snapOptionalBoolean 189 | Default : false 190 |

True to snap slider to step values

191 |
disableOptionalBoolean 198 | Default : false 199 |

True if this is a disable(read only) range selector. You can also change disable status later by calling.

200 | 201 | $('.slider').jRange('disable'); 202 | $('.slider').jRange('enable'); 203 | $('.slider').jRange('toggleDisable'); 204 | 205 |
onstatechangeOptionalFunction 212 |

This function is called whenever the value is changed by user. This same value is also automatically set for the provided Hidden Input.

213 |

For single slider value is without comma, however for a range selector value is comma-seperated.

214 |
ondragendOptionalFunction 221 |

ondragend callback. Useful if you want to fire event just once per slider drag.

222 |
onbarclickedOptionalFunction 229 |

called when user clicks on the bar

230 |
233 | 234 |

Modification

235 |

Change values on runtime

236 |

Methods which you can call to dynamically modify current values and range. 237 | 238 | 239 | 240 | 241 | 242 | 243 | 244 | 245 | 246 | 247 | 248 | 255 | 256 | 257 | 258 | 259 | 260 | 269 | 270 |
MethodDescription
setValue 249 |

sets the current value of the slider without changing its range, if you want to update the range as well use updateRange instead.

250 | 251 | $('.slider').jRange('setValue', '10,20');
252 | $('.slider').jRange('setValue', '10'); 253 | 254 |
updateRange 261 |

'updateRange' to change (min, max) value and interval after initialized.

262 | 263 | $('.slider').jRange('updateRange', '0,100');
264 | $('.slider').jRange('updateRange', '0,100', '25,50');
265 | $('.slider').jRange('updateRange', '0,100', 25); 266 | 267 |

passing second parameter also sets its current value

268 |
271 | 272 |

273 | Get it from Github 274 |
275 |
276 |
277 |
278 |
279 |
280 |
281 |

282 | 283 | 284 |

285 |

286 |
287 |
288 |

jRange is authored and maintained by @nitinhayaran

289 |

290 | Released under the MIT 291 | License 292 |

293 |
294 |
295 |
296 | 297 | 298 | 299 | 323 | 324 | 325 | -------------------------------------------------------------------------------- /demo/main.css: -------------------------------------------------------------------------------- 1 | html, 2 | body { 3 | height: 100%; 4 | width: 100%; 5 | } 6 | body { 7 | font-family: Helvetica Neue, Helvetica, Arial sans-serif; 8 | font-size: 16px; 9 | line-height: 1.6; 10 | color: #434343; 11 | } 12 | a { 13 | text-decoration: none; 14 | } 15 | pre code { 16 | line-height: 1.5; 17 | } 18 | .container { 19 | width: 1130px; 20 | padding: 0 20px; 21 | margin: 0px auto; 22 | } 23 | .text-container { 24 | width: 900px; 25 | position: relative; 26 | margin: 0px auto; 27 | } 28 | .clearfix:after { 29 | content: " "; 30 | /* Older browser do not support empty content */ 31 | visibility: hidden; 32 | display: block; 33 | height: 0; 34 | clear: both; 35 | } 36 | .pane { 37 | position: relative; 38 | width: 100%; 39 | height: 50%; 40 | min-height: 450px; 41 | } 42 | .body { 43 | position: relative; 44 | } 45 | section.header { 46 | background-color: #606c88; 47 | background: -webkit-linear-gradient(90deg, #606c88 10%, #3f4c6b 90%); 48 | /* Chrome 10+, Saf5.1+ */ 49 | background: -moz-linear-gradient(90deg, #606c88 10%, #3f4c6b 90%); 50 | /* FF3.6+ */ 51 | background: -ms-linear-gradient(90deg, #606c88 10%, #3f4c6b 90%); 52 | /* IE10 */ 53 | background: -o-linear-gradient(90deg, #606c88 10%, #3f4c6b 90%); 54 | /* Opera 11.10+ */ 55 | background: linear-gradient(90deg, #606c88 10%, #3f4c6b 90%); 56 | /* W3C */ 57 | } 58 | section.header footer { 59 | position: absolute; 60 | width: 100%; 61 | bottom: 0; 62 | padding: 10px 30px; 63 | box-sizing: border-box; 64 | } 65 | .left { 66 | float: left; 67 | text-align: left; 68 | } 69 | .right { 70 | float: right; 71 | text-align: right; 72 | } 73 | div.header { 74 | color: #fff; 75 | width: 600px; 76 | text-align: center; 77 | position: absolute; 78 | top: 40%; 79 | left: 50%; 80 | transform: translate(-50%, -50%); 81 | border-radius: 5px; 82 | } 83 | div.header h1, 84 | div.header h2 { 85 | font-family: 'Raleway' sans-serif; 86 | font-weight: 100; 87 | line-height: 1; 88 | margin: 0; 89 | } 90 | div.header h1 { 91 | font-size: 72px; 92 | margin-bottom: 25px; 93 | } 94 | section.demo h2, 95 | section.demo h3 { 96 | font-family: 'Raleway' sans-serif; 97 | font-weight: 300; 98 | line-height: 1; 99 | margin: 0; 100 | text-align: center; 101 | } 102 | section.demo h2 { 103 | font-size: 48px; 104 | margin-top: 1em; 105 | } 106 | section.demo h3 { 107 | font-size: 28px; 108 | margin: 0.8em 0 1em; 109 | } 110 | section.demo .demo-container { 111 | margin: 40px 0 80px; 112 | } 113 | section.demo .demo-section { 114 | margin: 20px 0; 115 | clear: both; 116 | } 117 | section.demo .demo-section .demo-code { 118 | width: 50%; 119 | float: left; 120 | } 121 | section.demo .demo-section .demo-output { 122 | margin-left: 50%; 123 | padding: 50px 0; 124 | } 125 | section.demo .demo-section .slider-container { 126 | margin: 0 auto; 127 | } 128 | section.demo .text-container h2 { 129 | margin-top: 3em; 130 | } 131 | section.demo .form-vertical { 132 | width: 200px; 133 | float: left; 134 | } 135 | section.demo .image-container { 136 | margin-left: 200px; 137 | padding: 1px; 138 | border: 1px solid #eee; 139 | } 140 | section.demo .form-group { 141 | margin-bottom: 20px; 142 | } 143 | section.demo label { 144 | color: #999; 145 | font-size: 13px; 146 | display: block; 147 | } 148 | section.demo input { 149 | width: 150px; 150 | margin-top: 3px; 151 | border: 1px solid #999; 152 | border-width: 0 0 1px 0; 153 | padding: 3px 0 3px; 154 | transition: 0.3s all; 155 | } 156 | section.demo input:focus, 157 | section.demo input:active { 158 | outline: none; 159 | border-color: #2fc7ff; 160 | box-shadow: 0 1px 3px -3px #2fc7ff; 161 | color: #000; 162 | } 163 | section.demo button { 164 | position: relative; 165 | overflow: visible; 166 | display: inline-block; 167 | padding: 0.3em 1em; 168 | border: 1px solid #d4d4d4; 169 | margin: 0; 170 | text-decoration: none; 171 | text-align: center; 172 | text-shadow: 1px 1px 0 #fff; 173 | font-size: 12px; 174 | color: #333; 175 | white-space: nowrap; 176 | cursor: pointer; 177 | outline: none; 178 | background-color: #ececec; 179 | background-image: linear-gradient(#f4f4f4, #ececec); 180 | background-clip: padding-box; 181 | border-radius: 0.2em; 182 | zoom: 1; 183 | transition: background-image 0.3s; 184 | } 185 | section.demo button:hover, 186 | section.demo button:active { 187 | border-color: #3072b3; 188 | border-bottom-color: #2a65a0; 189 | text-decoration: none; 190 | text-shadow: -1px -1px 0 rgba(0, 0, 0, 0.3); 191 | color: #fff; 192 | background-color: #3c8dde; 193 | background-image: linear-gradient(#599bdc, #3072b3); 194 | } 195 | section.demo p { 196 | font-family: 'Raleway' sans-serif; 197 | margin: 1em auto; 198 | } 199 | section.demo .footer { 200 | margin-top: 80px; 201 | text-align: center; 202 | } 203 | section.demo .large-github { 204 | display: inline-block; 205 | border: 1px solid #21b0ff; 206 | font-weight: 400; 207 | font-family: 'Raleway' sans-serif; 208 | text-shadow: none; 209 | background-color: #fff; 210 | background-image: none; 211 | padding: 8px 25px; 212 | color: #21b0ff; 213 | font-size: 18px; 214 | border-radius: 25px; 215 | } 216 | section.demo .large-github:hover, 217 | section.demo .large-github:active { 218 | background-color: #21b0ff; 219 | color: #fff; 220 | background-image: none; 221 | text-shadow: none; 222 | } 223 | .two-coloumn em { 224 | font-weight: normal; 225 | text-decoration: none; 226 | font-style: normal; 227 | display: inline-block; 228 | width: 85px; 229 | } 230 | .plugin-options { 231 | font-size: 14px; 232 | margin-bottom: 40px; 233 | width: 900px; 234 | font-weight: 200; 235 | } 236 | .plugin-options td, 237 | .plugin-options th { 238 | padding: 8px ; 239 | text-align: left; 240 | vertical-align: top; 241 | } 242 | .plugin-options td:first-child, 243 | .plugin-options th:first-child { 244 | font-weight: bold; 245 | } 246 | .plugin-options td:nth-child(2), 247 | .plugin-options td:nth-child(3) { 248 | font-size: 13px; 249 | color: #999; 250 | } 251 | .plugin-options td p { 252 | font-family: Helvetica Neue, Helvetica, Arial, sans-serif; 253 | margin: 4px 0; 254 | } 255 | .plugin-options td p:first-child { 256 | margin-top: 0; 257 | } 258 | .plugin-options th { 259 | background-color: #358ccb; 260 | color: #fff; 261 | } 262 | .plugin-options tr:nth-child(2n + 1) td { 263 | background-color: #f5f5f5; 264 | } 265 | .plugin-options small { 266 | display: block; 267 | } 268 | .plugin-options ul { 269 | list-style: none; 270 | padding: 0; 271 | } 272 | .plugin-options ul ul { 273 | list-style: circle inside; 274 | } 275 | section.footer { 276 | margin-top: 80px; 277 | padding: 30px; 278 | text-align: center; 279 | background-color: #333; 280 | color: #999; 281 | font-weight: 300; 282 | font-size: 13px; 283 | } 284 | section.footer p { 285 | margin: 5px 0; 286 | } 287 | section.footer a { 288 | color: #fff; 289 | } 290 | -------------------------------------------------------------------------------- /demo/main.less: -------------------------------------------------------------------------------- 1 | @font-family: 'Raleway' sans-serif; 2 | html, body{ 3 | height: 100%; 4 | width: 100%; 5 | } 6 | body{ 7 | font-family: Helvetica Neue, Helvetica, Arial sans-serif; 8 | font-size: 16px; 9 | line-height: 1.6; 10 | color: #434343; 11 | } 12 | a{ 13 | text-decoration: none; 14 | } 15 | pre code{ 16 | line-height: 1.5; 17 | } 18 | .container{ 19 | width: 1130px; 20 | padding: 0 20px; 21 | margin: 0px auto; 22 | } 23 | .text-container{ 24 | width: 900px; 25 | position: relative; 26 | margin: 0px auto; 27 | } 28 | .clearfix:after { 29 | content: " "; /* Older browser do not support empty content */ 30 | visibility: hidden; 31 | display: block; 32 | height: 0; 33 | clear: both; 34 | } 35 | .pane{ 36 | position: relative; 37 | width: 100%; 38 | height: 50%; 39 | min-height: 450px; 40 | } 41 | .body{ 42 | position: relative; 43 | } 44 | section.header{ 45 | background-color: #606c88; 46 | 47 | background: -webkit-linear-gradient(90deg, #606c88 10%, #3f4c6b 90%); /* Chrome 10+, Saf5.1+ */ 48 | background: -moz-linear-gradient(90deg, #606c88 10%, #3f4c6b 90%); /* FF3.6+ */ 49 | background: -ms-linear-gradient(90deg, #606c88 10%, #3f4c6b 90%); /* IE10 */ 50 | background: -o-linear-gradient(90deg, #606c88 10%, #3f4c6b 90%); /* Opera 11.10+ */ 51 | background: linear-gradient(90deg, #606c88 10%, #3f4c6b 90%); /* W3C */ 52 | 53 | // background-image: radial-gradient(50% 102%, #3cb3db 48%, #2e6c9a 100%); 54 | footer{ 55 | position: absolute; 56 | width: 100%; 57 | bottom: 0; 58 | padding: 10px 30px; 59 | box-sizing: border-box; 60 | } 61 | } 62 | .left{ 63 | float: left; 64 | text-align: left; 65 | } 66 | .right{ 67 | float: right; 68 | text-align: right; 69 | } 70 | div.header{ 71 | color: #fff; 72 | width: 600px; 73 | text-align: center; 74 | position: absolute; 75 | top: 40%; 76 | left: 50%; 77 | transform: translate(-50%, -50%); 78 | // background-color: #333; 79 | border-radius: 5px; 80 | h1, h2{ 81 | font-family: @font-family; 82 | font-weight: 100; 83 | line-height: 1; 84 | margin: 0; 85 | } 86 | h1{ 87 | font-size: 72px; 88 | margin-bottom: 25px; 89 | } 90 | } 91 | section.demo{ 92 | h2, h3{ 93 | font-family: @font-family; 94 | font-weight: 300; 95 | line-height: 1; 96 | margin: 0; 97 | text-align: center; 98 | } 99 | h2{ 100 | font-size: 48px; 101 | margin-top: 1em; 102 | } 103 | h3{ 104 | font-size: 28px; 105 | margin: 0.8em 0 1em; 106 | } 107 | .demo-container{ 108 | margin: 40px 0 80px; 109 | } 110 | .demo-section{ 111 | margin: 20px 0; 112 | clear: both; 113 | .demo-code{ 114 | width: 50%; 115 | float: left; 116 | } 117 | .demo-output{ 118 | margin-left: 50%; 119 | padding: 50px 0; 120 | } 121 | .slider-container{ 122 | margin: 0 auto; 123 | } 124 | } 125 | .text-container{ 126 | h2{ 127 | margin-top: 3em; 128 | } 129 | } 130 | .form-vertical{ 131 | width: 200px; 132 | float: left; 133 | } 134 | .image-container{ 135 | margin-left: 200px; 136 | padding: 1px; 137 | border: 1px solid #eee; 138 | // background-color: #333; 139 | } 140 | .form-group{ 141 | margin-bottom: 20px; 142 | } 143 | label{ 144 | color: #999; 145 | font-size: 13px; 146 | display: block; 147 | } 148 | input{ 149 | width: 150px; 150 | margin-top: 3px; 151 | // border-radius: 2px; 152 | border: 1px solid #999; 153 | border-width: 0 0 1px 0; 154 | padding: 3px 0 3px; 155 | transition: 0.3s all; 156 | // color: #999; 157 | &:focus, &:active{ 158 | outline: none; 159 | border-color: #2fc7ff; 160 | box-shadow: 0 1px 3px -3px #2fc7ff; 161 | color: #000; 162 | } 163 | } 164 | button{ 165 | position: relative; 166 | overflow: visible; 167 | display: inline-block; 168 | padding: 0.3em 1em; 169 | border: 1px solid #d4d4d4; 170 | margin: 0; 171 | text-decoration: none; 172 | text-align: center; 173 | text-shadow: 1px 1px 0 #fff; 174 | font-size: 12px; 175 | color: #333; 176 | white-space: nowrap; 177 | cursor: pointer; 178 | outline: none; 179 | background-color: #ececec; 180 | background-image: linear-gradient(#f4f4f4, #ececec); 181 | background-clip: padding-box; 182 | border-radius: 0.2em; 183 | zoom: 1; 184 | transition: background-image 0.3s; 185 | &:hover, &:active{ 186 | border-color: #3072b3; 187 | border-bottom-color: #2a65a0; 188 | text-decoration: none; 189 | text-shadow: -1px -1px 0 rgba(0,0,0,0.3); 190 | color: #fff; 191 | background-color: #3c8dde; 192 | background-image: linear-gradient(#599bdc, #3072b3); 193 | } 194 | } 195 | p{ 196 | font-family: @font-family; 197 | margin: 1em auto; 198 | } 199 | .footer{ 200 | margin-top: 80px; 201 | text-align: center; 202 | } 203 | .large-github{ 204 | display: inline-block; 205 | border: 1px solid #21b0ff; 206 | font-weight: 400; 207 | font-family: @font-family; 208 | text-shadow: none; 209 | background-color: #fff; 210 | background-image: none; 211 | padding: 8px 25px; 212 | color: #21b0ff; 213 | font-size: 18px; 214 | border-radius: 25px; 215 | &:hover, &:active{ 216 | background-color: #21b0ff; 217 | color: #fff; 218 | background-image: none; 219 | text-shadow: none; 220 | } 221 | } 222 | } 223 | .two-coloumn{ 224 | em{ 225 | font-weight: normal; 226 | text-decoration: none; 227 | font-style: normal; 228 | display: inline-block; 229 | width: 85px; 230 | } 231 | } 232 | .plugin-options{ 233 | font-size: 14px; 234 | margin-bottom: 40px; 235 | width: 900px; 236 | font-weight: 200; 237 | td, th{ 238 | padding: 8px ; 239 | text-align: left; 240 | vertical-align: top; 241 | &:first-child{ 242 | font-weight: bold; 243 | } 244 | } 245 | td{ 246 | &:nth-child(2), &:nth-child(3){ 247 | font-size: 13px; 248 | color: #999; 249 | } 250 | p{ 251 | font-family: Helvetica Neue, Helvetica, Arial, sans-serif; 252 | margin: 4px 0; 253 | &:first-child{ 254 | margin-top: 0; 255 | } 256 | } 257 | } 258 | th{ 259 | background-color: #358ccb; 260 | color: #fff; 261 | } 262 | tr{ 263 | &:nth-child(2n + 1){ 264 | td{ 265 | background-color: #f5f5f5; 266 | } 267 | } 268 | } 269 | small{ 270 | display: block; 271 | // white-space: nowrap; 272 | } 273 | ul{ 274 | list-style: none; 275 | padding: 0; 276 | ul{ 277 | list-style: circle inside; 278 | // padding-left: 25px; 279 | } 280 | } 281 | } 282 | section.footer{ 283 | margin-top: 80px; 284 | padding: 30px; 285 | text-align: center; 286 | background-color: #333; 287 | color: #999; 288 | font-weight: 300; 289 | font-size: 13px; 290 | p{ 291 | margin: 5px 0; 292 | } 293 | a{ 294 | color: #fff; 295 | } 296 | } -------------------------------------------------------------------------------- /demo/normalize.css: -------------------------------------------------------------------------------- 1 | /*! normalize.css v3.0.1 | MIT License | git.io/normalize */ 2 | 3 | /** 4 | * 1. Set default font family to sans-serif. 5 | * 2. Prevent iOS text size adjust after orientation change, without disabling 6 | * user zoom. 7 | */ 8 | 9 | html { 10 | font-family: sans-serif; /* 1 */ 11 | -ms-text-size-adjust: 100%; /* 2 */ 12 | -webkit-text-size-adjust: 100%; /* 2 */ 13 | } 14 | 15 | /** 16 | * Remove default margin. 17 | */ 18 | 19 | body { 20 | margin: 0; 21 | } 22 | 23 | /* HTML5 display definitions 24 | ========================================================================== */ 25 | 26 | /** 27 | * Correct `block` display not defined for any HTML5 element in IE 8/9. 28 | * Correct `block` display not defined for `details` or `summary` in IE 10/11 and Firefox. 29 | * Correct `block` display not defined for `main` in IE 11. 30 | */ 31 | 32 | article, 33 | aside, 34 | details, 35 | figcaption, 36 | figure, 37 | footer, 38 | header, 39 | hgroup, 40 | main, 41 | nav, 42 | section, 43 | summary { 44 | display: block; 45 | } 46 | 47 | /** 48 | * 1. Correct `inline-block` display not defined in IE 8/9. 49 | * 2. Normalize vertical alignment of `progress` in Chrome, Firefox, and Opera. 50 | */ 51 | 52 | audio, 53 | canvas, 54 | progress, 55 | video { 56 | display: inline-block; /* 1 */ 57 | vertical-align: baseline; /* 2 */ 58 | } 59 | 60 | /** 61 | * Prevent modern browsers from displaying `audio` without controls. 62 | * Remove excess height in iOS 5 devices. 63 | */ 64 | 65 | audio:not([controls]) { 66 | display: none; 67 | height: 0; 68 | } 69 | 70 | /** 71 | * Address `[hidden]` styling not present in IE 8/9/10. 72 | * Hide the `template` element in IE 8/9/11, Safari, and Firefox < 22. 73 | */ 74 | 75 | [hidden], 76 | template { 77 | display: none; 78 | } 79 | 80 | /* Links 81 | ========================================================================== */ 82 | 83 | /** 84 | * Remove the gray background color from active links in IE 10. 85 | */ 86 | 87 | a { 88 | background: transparent; 89 | } 90 | 91 | /** 92 | * Improve readability when focused and also mouse hovered in all browsers. 93 | */ 94 | 95 | a:active, 96 | a:hover { 97 | outline: 0; 98 | } 99 | 100 | /* Text-level semantics 101 | ========================================================================== */ 102 | 103 | /** 104 | * Address styling not present in IE 8/9/10/11, Safari, and Chrome. 105 | */ 106 | 107 | abbr[title] { 108 | border-bottom: 1px dotted; 109 | } 110 | 111 | /** 112 | * Address style set to `bolder` in Firefox 4+, Safari, and Chrome. 113 | */ 114 | 115 | b, 116 | strong { 117 | font-weight: bold; 118 | } 119 | 120 | /** 121 | * Address styling not present in Safari and Chrome. 122 | */ 123 | 124 | dfn { 125 | font-style: italic; 126 | } 127 | 128 | /** 129 | * Address variable `h1` font-size and margin within `section` and `article` 130 | * contexts in Firefox 4+, Safari, and Chrome. 131 | */ 132 | 133 | h1 { 134 | font-size: 2em; 135 | margin: 0.67em 0; 136 | } 137 | 138 | /** 139 | * Address styling not present in IE 8/9. 140 | */ 141 | 142 | mark { 143 | background: #ff0; 144 | color: #000; 145 | } 146 | 147 | /** 148 | * Address inconsistent and variable font size in all browsers. 149 | */ 150 | 151 | small { 152 | font-size: 80%; 153 | } 154 | 155 | /** 156 | * Prevent `sub` and `sup` affecting `line-height` in all browsers. 157 | */ 158 | 159 | sub, 160 | sup { 161 | font-size: 75%; 162 | line-height: 0; 163 | position: relative; 164 | vertical-align: baseline; 165 | } 166 | 167 | sup { 168 | top: -0.5em; 169 | } 170 | 171 | sub { 172 | bottom: -0.25em; 173 | } 174 | 175 | /* Embedded content 176 | ========================================================================== */ 177 | 178 | /** 179 | * Remove border when inside `a` element in IE 8/9/10. 180 | */ 181 | 182 | img { 183 | border: 0; 184 | } 185 | 186 | /** 187 | * Correct overflow not hidden in IE 9/10/11. 188 | */ 189 | 190 | svg:not(:root) { 191 | overflow: hidden; 192 | } 193 | 194 | /* Grouping content 195 | ========================================================================== */ 196 | 197 | /** 198 | * Address margin not present in IE 8/9 and Safari. 199 | */ 200 | 201 | figure { 202 | margin: 1em 40px; 203 | } 204 | 205 | /** 206 | * Address differences between Firefox and other browsers. 207 | */ 208 | 209 | hr { 210 | -moz-box-sizing: content-box; 211 | box-sizing: content-box; 212 | height: 0; 213 | } 214 | 215 | /** 216 | * Contain overflow in all browsers. 217 | */ 218 | 219 | pre { 220 | overflow: auto; 221 | } 222 | 223 | /** 224 | * Address odd `em`-unit font size rendering in all browsers. 225 | */ 226 | 227 | code, 228 | kbd, 229 | pre, 230 | samp { 231 | font-family: monospace, monospace; 232 | font-size: 1em; 233 | } 234 | 235 | /* Forms 236 | ========================================================================== */ 237 | 238 | /** 239 | * Known limitation: by default, Chrome and Safari on OS X allow very limited 240 | * styling of `select`, unless a `border` property is set. 241 | */ 242 | 243 | /** 244 | * 1. Correct color not being inherited. 245 | * Known issue: affects color of disabled elements. 246 | * 2. Correct font properties not being inherited. 247 | * 3. Address margins set differently in Firefox 4+, Safari, and Chrome. 248 | */ 249 | 250 | button, 251 | input, 252 | optgroup, 253 | select, 254 | textarea { 255 | color: inherit; /* 1 */ 256 | font: inherit; /* 2 */ 257 | margin: 0; /* 3 */ 258 | } 259 | 260 | /** 261 | * Address `overflow` set to `hidden` in IE 8/9/10/11. 262 | */ 263 | 264 | button { 265 | overflow: visible; 266 | } 267 | 268 | /** 269 | * Address inconsistent `text-transform` inheritance for `button` and `select`. 270 | * All other form control elements do not inherit `text-transform` values. 271 | * Correct `button` style inheritance in Firefox, IE 8/9/10/11, and Opera. 272 | * Correct `select` style inheritance in Firefox. 273 | */ 274 | 275 | button, 276 | select { 277 | text-transform: none; 278 | } 279 | 280 | /** 281 | * 1. Avoid the WebKit bug in Android 4.0.* where (2) destroys native `audio` 282 | * and `video` controls. 283 | * 2. Correct inability to style clickable `input` types in iOS. 284 | * 3. Improve usability and consistency of cursor style between image-type 285 | * `input` and others. 286 | */ 287 | 288 | button, 289 | html input[type="button"], /* 1 */ 290 | input[type="reset"], 291 | input[type="submit"] { 292 | -webkit-appearance: button; /* 2 */ 293 | cursor: pointer; /* 3 */ 294 | } 295 | 296 | /** 297 | * Re-set default cursor for disabled elements. 298 | */ 299 | 300 | button[disabled], 301 | html input[disabled] { 302 | cursor: default; 303 | } 304 | 305 | /** 306 | * Remove inner padding and border in Firefox 4+. 307 | */ 308 | 309 | button::-moz-focus-inner, 310 | input::-moz-focus-inner { 311 | border: 0; 312 | padding: 0; 313 | } 314 | 315 | /** 316 | * Address Firefox 4+ setting `line-height` on `input` using `!important` in 317 | * the UA stylesheet. 318 | */ 319 | 320 | input { 321 | line-height: normal; 322 | } 323 | 324 | /** 325 | * It's recommended that you don't attempt to style these elements. 326 | * Firefox's implementation doesn't respect box-sizing, padding, or width. 327 | * 328 | * 1. Address box sizing set to `content-box` in IE 8/9/10. 329 | * 2. Remove excess padding in IE 8/9/10. 330 | */ 331 | 332 | input[type="checkbox"], 333 | input[type="radio"] { 334 | box-sizing: border-box; /* 1 */ 335 | padding: 0; /* 2 */ 336 | } 337 | 338 | /** 339 | * Fix the cursor style for Chrome's increment/decrement buttons. For certain 340 | * `font-size` values of the `input`, it causes the cursor style of the 341 | * decrement button to change from `default` to `text`. 342 | */ 343 | 344 | input[type="number"]::-webkit-inner-spin-button, 345 | input[type="number"]::-webkit-outer-spin-button { 346 | height: auto; 347 | } 348 | 349 | /** 350 | * 1. Address `appearance` set to `searchfield` in Safari and Chrome. 351 | * 2. Address `box-sizing` set to `border-box` in Safari and Chrome 352 | * (include `-moz` to future-proof). 353 | */ 354 | 355 | input[type="search"] { 356 | -webkit-appearance: textfield; /* 1 */ 357 | -moz-box-sizing: content-box; 358 | -webkit-box-sizing: content-box; /* 2 */ 359 | box-sizing: content-box; 360 | } 361 | 362 | /** 363 | * Remove inner padding and search cancel button in Safari and Chrome on OS X. 364 | * Safari (but not Chrome) clips the cancel button when the search input has 365 | * padding (and `textfield` appearance). 366 | */ 367 | 368 | input[type="search"]::-webkit-search-cancel-button, 369 | input[type="search"]::-webkit-search-decoration { 370 | -webkit-appearance: none; 371 | } 372 | 373 | /** 374 | * Define consistent border, margin, and padding. 375 | */ 376 | 377 | fieldset { 378 | border: 1px solid #c0c0c0; 379 | margin: 0 2px; 380 | padding: 0.35em 0.625em 0.75em; 381 | } 382 | 383 | /** 384 | * 1. Correct `color` not being inherited in IE 8/9/10/11. 385 | * 2. Remove padding so people aren't caught out if they zero out fieldsets. 386 | */ 387 | 388 | legend { 389 | border: 0; /* 1 */ 390 | padding: 0; /* 2 */ 391 | } 392 | 393 | /** 394 | * Remove default vertical scrollbar in IE 8/9/10/11. 395 | */ 396 | 397 | textarea { 398 | overflow: auto; 399 | } 400 | 401 | /** 402 | * Don't inherit the `font-weight` (applied by a rule above). 403 | * NOTE: the default cannot safely be changed in Chrome and Safari on OS X. 404 | */ 405 | 406 | optgroup { 407 | font-weight: bold; 408 | } 409 | 410 | /* Tables 411 | ========================================================================== */ 412 | 413 | /** 414 | * Remove most spacing between table cells. 415 | */ 416 | 417 | table { 418 | border-collapse: collapse; 419 | border-spacing: 0; 420 | } 421 | 422 | td, 423 | th { 424 | padding: 0; 425 | } 426 | -------------------------------------------------------------------------------- /demo/prism/prism.css: -------------------------------------------------------------------------------- 1 | /* http://prismjs.com/download.html?themes=prism-coy&languages=markup+css+css-extras+clike+javascript */ 2 | /** 3 | * prism.js Coy theme for JavaScript, CoffeeScript, CSS and HTML 4 | * Based on https://github.com/tshedor/workshop-wp-theme (Example: http://workshop.kansan.com/category/sessions/basics or http://workshop.timshedor.com/category/sessions/basics); 5 | * @author Tim Shedor 6 | */ 7 | 8 | code[class*="language-"], 9 | pre[class*="language-"] { 10 | color: black; 11 | font-family: Consolas, Monaco, 'Andale Mono', monospace; 12 | direction: ltr; 13 | text-align: left; 14 | white-space: pre; 15 | word-spacing: normal; 16 | word-break: normal; 17 | 18 | -moz-tab-size: 4; 19 | -o-tab-size: 4; 20 | tab-size: 4; 21 | 22 | -webkit-hyphens: none; 23 | -moz-hyphens: none; 24 | -ms-hyphens: none; 25 | hyphens: none; 26 | } 27 | 28 | /* Code blocks */ 29 | pre[class*="language-"] { 30 | position:relative; 31 | padding: 1em; 32 | margin: .5em 0; 33 | -webkit-box-shadow: -1px 0px 0px 0px #358ccb, 0px 0px 0px 1px #dfdfdf; 34 | -moz-box-shadow: -1px 0px 0px 0px #358ccb, 0px 0px 0px 1px #dfdfdf; 35 | box-shadow: -1px 0px 0px 0px #358ccb, 0px 0px 0px 1px #dfdfdf; 36 | border-left: 10px solid #358ccb; 37 | background-color: #fdfdfd; 38 | background-image: -webkit-linear-gradient(transparent 50%, rgba(69, 142, 209, 0.04) 50%); 39 | background-image: -moz-linear-gradient(transparent 50%, rgba(69, 142, 209, 0.04) 50%); 40 | background-image: -ms-linear-gradient(transparent 50%, rgba(69, 142, 209, 0.04) 50%); 41 | background-image: -o-linear-gradient(transparent 50%, rgba(69, 142, 209, 0.04) 50%); 42 | background-image: linear-gradient(transparent 50%, rgba(69, 142, 209, 0.04) 50%); 43 | background-size: 3em 3em; 44 | background-origin:content-box; 45 | overflow:visible; 46 | max-height:30em; 47 | } 48 | 49 | code[class*="language"] { 50 | max-height:29em; 51 | display:block; 52 | overflow:scroll; 53 | } 54 | 55 | /* Margin bottom to accomodate shadow */ 56 | :not(pre) > code[class*="language-"], 57 | pre[class*="language-"] { 58 | background-color:#fdfdfd; 59 | -webkit-box-sizing: border-box; 60 | -moz-box-sizing: border-box; 61 | box-sizing: border-box; 62 | margin-bottom: 1em; 63 | } 64 | 65 | /* Inline code */ 66 | :not(pre) > code[class*="language-"] { 67 | position:relative; 68 | padding: .2em; 69 | -webkit-border-radius: 0.3em; 70 | -moz-border-radius: 0.3em; 71 | -ms-border-radius: 0.3em; 72 | -o-border-radius: 0.3em; 73 | border-radius: 0.3em; 74 | color: #c92c2c; 75 | border: 1px solid rgba(0, 0, 0, 0.1); 76 | } 77 | 78 | pre[class*="language-"]:before, 79 | pre[class*="language-"]:after { 80 | content: ''; 81 | z-index: -2; 82 | display:block; 83 | position: absolute; 84 | bottom: 0.75em; 85 | left: 0.18em; 86 | width: 40%; 87 | height: 20%; 88 | -webkit-box-shadow: 0px 13px 8px #979797; 89 | -moz-box-shadow: 0px 13px 8px #979797; 90 | box-shadow: 0px 13px 8px #979797; 91 | -webkit-transform: rotate(-2deg); 92 | -moz-transform: rotate(-2deg); 93 | -ms-transform: rotate(-2deg); 94 | -o-transform: rotate(-2deg); 95 | transform: rotate(-2deg); 96 | } 97 | 98 | :not(pre) > code[class*="language-"]:after, 99 | pre[class*="language-"]:after { 100 | right: 0.75em; 101 | left: auto; 102 | -webkit-transform: rotate(2deg); 103 | -moz-transform: rotate(2deg); 104 | -ms-transform: rotate(2deg); 105 | -o-transform: rotate(2deg); 106 | transform: rotate(2deg); 107 | } 108 | 109 | .token.comment, 110 | .token.block-comment, 111 | .token.prolog, 112 | .token.doctype, 113 | .token.cdata { 114 | color: #7D8B99; 115 | } 116 | 117 | .token.punctuation { 118 | color: #5F6364; 119 | } 120 | 121 | .token.property, 122 | .token.tag, 123 | .token.boolean, 124 | .token.number, 125 | .token.function-name, 126 | .token.constant, 127 | .token.symbol { 128 | color: #c92c2c; 129 | } 130 | 131 | .token.selector, 132 | .token.attr-name, 133 | .token.string, 134 | .token.function, 135 | .token.builtin { 136 | color: #2f9c0a; 137 | } 138 | 139 | .token.operator, 140 | .token.entity, 141 | .token.url, 142 | .token.variable { 143 | color: #a67f59; 144 | background: rgba(255, 255, 255, 0.5); 145 | } 146 | 147 | .token.atrule, 148 | .token.attr-value, 149 | .token.keyword, 150 | .token.class-name { 151 | color: #1990b8; 152 | } 153 | 154 | .token.regex, 155 | .token.important { 156 | color: #e90; 157 | } 158 | .language-css .token.string, 159 | .style .token.string { 160 | color: #a67f59; 161 | background: rgba(255, 255, 255, 0.5); 162 | } 163 | 164 | .token.important { 165 | font-weight: normal; 166 | } 167 | 168 | .token.entity { 169 | cursor: help; 170 | } 171 | 172 | .namespace { 173 | opacity: .7; 174 | } 175 | 176 | @media screen and (max-width:767px){ 177 | pre[class*="language-"]:before, 178 | pre[class*="language-"]:after { 179 | bottom:14px; 180 | -webkit-box-shadow:none; 181 | -moz-box-shadow:none; 182 | box-shadow:none; 183 | } 184 | 185 | } 186 | 187 | /* Plugin styles */ 188 | .token.tab:not(:empty):before, 189 | .token.cr:before, 190 | .token.lf:before { 191 | color: #e0d7d1; 192 | } 193 | 194 | -------------------------------------------------------------------------------- /demo/prism/prism.js: -------------------------------------------------------------------------------- 1 | /* http://prismjs.com/download.html?themes=prism-coy&languages=markup+css+css-extras+clike+javascript */ 2 | var self=typeof window!="undefined"?window:{},Prism=function(){var e=/\blang(?:uage)?-(?!\*)(\w+)\b/i,t=self.Prism={util:{encode:function(e){return e instanceof n?new n(e.type,t.util.encode(e.content)):t.util.type(e)==="Array"?e.map(t.util.encode):e.replace(/&/g,"&").replace(/e.length)break e;if(p instanceof i)continue;a.lastIndex=0;var d=a.exec(p);if(d){l&&(c=d[1].length);var v=d.index-1+c,d=d[0].slice(c),m=d.length,g=v+m,y=p.slice(0,v+1),b=p.slice(g+1),w=[h,1];y&&w.push(y);var E=new i(u,f?t.tokenize(d,f):d);w.push(E);b&&w.push(b);Array.prototype.splice.apply(s,w)}}}return s},hooks:{all:{},add:function(e,n){var r=t.hooks.all;r[e]=r[e]||[];r[e].push(n)},run:function(e,n){var r=t.hooks.all[e];if(!r||!r.length)return;for(var i=0,s;s=r[i++];)s(n)}}},n=t.Token=function(e,t){this.type=e;this.content=t};n.stringify=function(e,r,i){if(typeof e=="string")return e;if(Object.prototype.toString.call(e)=="[object Array]")return e.map(function(t){return n.stringify(t,r,e)}).join("");var s={type:e.type,content:n.stringify(e.content,r,i),tag:"span",classes:["token",e.type],attributes:{},language:r,parent:i};s.type=="comment"&&(s.attributes.spellcheck="true");t.hooks.run("wrap",s);var o="";for(var u in s.attributes)o+=u+'="'+(s.attributes[u]||"")+'"';return"<"+s.tag+' class="'+s.classes.join(" ")+'" '+o+">"+s.content+""};if(!self.document){if(!self.addEventListener)return self.Prism;self.addEventListener("message",function(e){var n=JSON.parse(e.data),r=n.language,i=n.code;self.postMessage(JSON.stringify(t.tokenize(i,t.languages[r])));self.close()},!1);return self.Prism}var r=document.getElementsByTagName("script");r=r[r.length-1];if(r){t.filename=r.src;document.addEventListener&&!r.hasAttribute("data-manual")&&document.addEventListener("DOMContentLoaded",t.highlightAll)}return self.Prism}();typeof module!="undefined"&&module.exports&&(module.exports=Prism);; 3 | Prism.languages.markup={comment://g,prolog:/<\?.+?\?>/,doctype://,cdata://i,tag:{pattern:/<\/?[\w:-]+\s*(?:\s+[\w:-]+(?:=(?:("|')(\\?[\w\W])*?\1|[^\s'">=]+))?\s*)*\/?>/gi,inside:{tag:{pattern:/^<\/?[\w:-]+/i,inside:{punctuation:/^<\/?/,namespace:/^[\w-]+?:/}},"attr-value":{pattern:/=(?:('|")[\w\W]*?(\1)|[^\s>]+)/gi,inside:{punctuation:/=|>|"/g}},punctuation:/\/?>/g,"attr-name":{pattern:/[\w:-]+/g,inside:{namespace:/^[\w-]+?:/}}}},entity:/\&#?[\da-z]{1,8};/gi};Prism.hooks.add("wrap",function(e){e.type==="entity"&&(e.attributes.title=e.content.replace(/&/,"&"))});; 4 | Prism.languages.css={comment:/\/\*[\w\W]*?\*\//g,atrule:{pattern:/@[\w-]+?.*?(;|(?=\s*{))/gi,inside:{punctuation:/[;:]/g}},url:/url\((["']?).*?\1\)/gi,selector:/[^\{\}\s][^\{\};]*(?=\s*\{)/g,property:/(\b|\B)[\w-]+(?=\s*:)/ig,string:/("|')(\\?.)*?\1/g,important:/\B!important\b/gi,punctuation:/[\{\};:]/g,"function":/[-a-z0-9]+(?=\()/ig};Prism.languages.markup&&Prism.languages.insertBefore("markup","tag",{style:{pattern:/[\w\W]*?<\/style>/ig,inside:{tag:{pattern:/|<\/style>/ig,inside:Prism.languages.markup.tag.inside},rest:Prism.languages.css}}});; 5 | Prism.languages.css.selector={pattern:/[^\{\}\s][^\{\}]*(?=\s*\{)/g,inside:{"pseudo-element":/:(?:after|before|first-letter|first-line|selection)|::[-\w]+/g,"pseudo-class":/:[-\w]+(?:\(.*\))?/g,"class":/\.[-:\.\w]+/g,id:/#[-:\.\w]+/g}};Prism.languages.insertBefore("css","ignore",{hexcode:/#[\da-f]{3,6}/gi,entity:/\\[\da-f]{1,8}/gi,number:/[\d%\.]+/g});; 6 | Prism.languages.clike={comment:{pattern:/(^|[^\\])(\/\*[\w\W]*?\*\/|(^|[^:])\/\/.*?(\r?\n|$))/g,lookbehind:!0},string:/("|')(\\?.)*?\1/g,"class-name":{pattern:/((?:(?:class|interface|extends|implements|trait|instanceof|new)\s+)|(?:catch\s+\())[a-z0-9_\.\\]+/ig,lookbehind:!0,inside:{punctuation:/(\.|\\)/}},keyword:/\b(if|else|while|do|for|return|in|instanceof|function|new|try|throw|catch|finally|null|break|continue)\b/g,"boolean":/\b(true|false)\b/g,"function":{pattern:/[a-z0-9_]+\(/ig,inside:{punctuation:/\(/}},number:/\b-?(0x[\dA-Fa-f]+|\d*\.?\d+([Ee]-?\d+)?)\b/g,operator:/[-+]{1,2}|!|<=?|>=?|={1,3}|&{1,2}|\|?\||\?|\*|\/|\~|\^|\%/g,ignore:/&(lt|gt|amp);/gi,punctuation:/[{}[\];(),.:]/g};; 7 | Prism.languages.javascript=Prism.languages.extend("clike",{keyword:/\b(break|case|catch|class|const|continue|debugger|default|delete|do|else|enum|export|extends|false|finally|for|function|get|if|implements|import|in|instanceof|interface|let|new|null|package|private|protected|public|return|set|static|super|switch|this|throw|true|try|typeof|var|void|while|with|yield)\b/g,number:/\b-?(0x[\dA-Fa-f]+|\d*\.?\d+([Ee]-?\d+)?|NaN|-?Infinity)\b/g});Prism.languages.insertBefore("javascript","keyword",{regex:{pattern:/(^|[^/])\/(?!\/)(\[.+?]|\\.|[^/\r\n])+\/[gim]{0,3}(?=\s*($|[\r\n,.;})]))/g,lookbehind:!0}});Prism.languages.markup&&Prism.languages.insertBefore("markup","tag",{script:{pattern:/[\w\W]*?<\/script>/ig,inside:{tag:{pattern:/|<\/script>/ig,inside:Prism.languages.markup.tag.inside},rest:Prism.languages.javascript}}}); 8 | ; 9 | -------------------------------------------------------------------------------- /jquery.range-min.js: -------------------------------------------------------------------------------- 1 | !function($,t,i,s){"use strict";var o=function(){return this.init.apply(this,arguments)};o.prototype={defaults:{onstatechange:function(){},ondragend:function(){},onbarclicked:function(){},isRange:!1,showLabels:!0,showScale:!0,step:1,format:"%s",theme:"theme-green",width:300,disable:!1,snap:!1},template:'
123456
456789
',init:function(t,i){this.options=$.extend({},this.defaults,i),this.inputNode=$(t),this.options.value=this.inputNode.val()||(this.options.isRange?this.options.from+","+this.options.from:""+this.options.from),this.domNode=$(this.template),this.domNode.addClass(this.options.theme),this.inputNode.after(this.domNode),this.domNode.on("change",this.onChange),this.pointers=$(".pointer",this.domNode),this.lowPointer=this.pointers.first(),this.highPointer=this.pointers.last(),this.labels=$(".pointer-label",this.domNode),this.lowLabel=this.labels.first(),this.highLabel=this.labels.last(),this.scale=$(".scale",this.domNode),this.bar=$(".selected-bar",this.domNode),this.clickableBar=this.domNode.find(".clickable-dummy"),this.interval=this.options.to-this.options.from,this.render()},render:function(){return 0!==this.inputNode.width()||this.options.width?(this.options.width=this.options.width||this.inputNode.width(),this.domNode.width(this.options.width),this.inputNode.hide(),this.isSingle()&&(this.lowPointer.hide(),this.lowLabel.hide()),this.options.showLabels||this.labels.hide(),this.attachEvents(),this.options.showScale&&this.renderScale(),void this.setValue(this.options.value)):void console.log("jRange : no width found, returning")},isSingle:function(){return"number"==typeof this.options.value?!0:-1===this.options.value.indexOf(",")&&!this.options.isRange},attachEvents:function(){this.clickableBar.click($.proxy(this.barClicked,this)),this.pointers.on("mousedown touchstart",$.proxy(this.onDragStart,this)),this.pointers.bind("dragstart",function(t){t.preventDefault()})},onDragStart:function(t){if(!(this.options.disable||"mousedown"===t.type&&1!==t.which)){t.stopPropagation(),t.preventDefault();var s=$(t.target);this.pointers.removeClass("last-active"),s.addClass("focused last-active"),this[(s.hasClass("low")?"low":"high")+"Label"].addClass("focused"),$(i).on("mousemove.slider touchmove.slider",$.proxy(this.onDrag,this,s)),$(i).on("mouseup.slider touchend.slider touchcancel.slider",$.proxy(this.onDragEnd,this))}},onDrag:function(t,i){i.stopPropagation(),i.preventDefault(),i.originalEvent.touches&&i.originalEvent.touches.length?i=i.originalEvent.touches[0]:i.originalEvent.changedTouches&&i.originalEvent.changedTouches.length&&(i=i.originalEvent.changedTouches[0]);var s=i.clientX-this.domNode.offset().left;this.domNode.trigger("change",[this,t,s])},onDragEnd:function(t){this.pointers.removeClass("focused").trigger("rangeslideend"),this.labels.removeClass("focused"),$(i).off(".slider"),this.options.ondragend.call(this,this.options.value)},barClicked:function(t){if(!this.options.disable){var i=t.pageX-this.clickableBar.offset().left;if(this.isSingle())this.setPosition(this.pointers.last(),i,!0,!0);else{var s=Math.abs(parseFloat(this.pointers.first().css("left"),10)),o=this.pointers.first().width()/2,e=Math.abs(parseFloat(this.pointers.last().css("left"),10)),n=this.pointers.first().width()/2,a=Math.abs(s-i+o),h=Math.abs(e-i+n),l;l=a==h?s>i?this.pointers.first():this.pointers.last():h>a?this.pointers.first():this.pointers.last(),this.setPosition(l,i,!0,!0)}this.options.onbarclicked.call(this,this.options.value)}},onChange:function(t,i,s,o){var e,n;e=0,n=i.domNode.width(),i.isSingle()||(e=s.hasClass("high")?parseFloat(i.lowPointer.css("left"))+i.lowPointer.width()/2:0,n=s.hasClass("low")?parseFloat(i.highPointer.css("left"))+i.highPointer.width()/2:i.domNode.width());var a=Math.min(Math.max(o,e),n);i.setPosition(s,a,!0)},setPosition:function(t,i,s,o){var e,n,a=parseFloat(this.lowPointer.css("left")),h=parseFloat(this.highPointer.css("left"))||0,l=this.highPointer.width()/2;if(s||(i=this.prcToPx(i)),this.options.snap){var r=this.correctPositionForSnap(i);if(-1===r)return;i=r}t[0]===this.highPointer[0]?h=Math.round(i-l):a=Math.round(i-l),t[o?"animate":"css"]({left:Math.round(i-l)}),this.isSingle()?e=0:(e=a+l,n=h+l);var d=Math.round(h+l-e);this.bar[o?"animate":"css"]({width:Math.abs(d),left:d>0?e:e+d}),this.showPointerValue(t,i,o),this.isReadonly()},correctPositionForSnap:function(t){var i=this.positionToValue(t)-this.options.from,s=this.options.width/(this.interval/this.options.step),o=i/this.options.step*s;return o+s/2>=t&&t>=o-s/2?o:-1},setValue:function(t){var i=t.toString().split(",");i[0]=Math.min(Math.max(i[0],this.options.from),this.options.to)+"",i.length>1&&(i[1]=Math.min(Math.max(i[1],this.options.from),this.options.to)+""),this.options.value=t;var s=this.valuesToPrc(2===i.length?i:[0,i[0]]);this.isSingle()?this.setPosition(this.highPointer,s[1]):(this.setPosition(this.lowPointer,s[0]),this.setPosition(this.highPointer,s[1]))},renderScale:function(){for(var t=this.options.scale||[this.options.from,this.options.to],i=Math.round(100/(t.length-1)*10)/10,s="",o=0;o'+("|"!=t[o]?""+t[o]+"":"")+"";this.scale.html(s),$("ins",this.scale).each(function(){$(this).css({marginLeft:-$(this).outerWidth()/2})})},getBarWidth:function(){var t=this.options.value.split(",");return t.length>1?parseFloat(t[1])-parseFloat(t[0]):parseFloat(t[0])},showPointerValue:function(t,i,o){var e=$(".pointer-label",this.domNode)[t.hasClass("low")?"first":"last"](),n,a=this.positionToValue(i);if($.isFunction(this.options.format)){var h=this.isSingle()?s:t.hasClass("low")?"low":"high";n=this.options.format(a,h)}else n=this.options.format.replace("%s",a);var l=e.html(n).width(),r=i-l/2;r=Math.min(Math.max(r,0),this.options.width-l),e[o?"animate":"css"]({left:r}),this.setInputValue(t,a)},valuesToPrc:function(t){var i=100*(parseFloat(t[0])-parseFloat(this.options.from))/this.interval,s=100*(parseFloat(t[1])-parseFloat(this.options.from))/this.interval;return[i,s]},prcToPx:function(t){return this.domNode.width()*t/100},isDecimal:function(){return-1!==(this.options.value+this.options.from+this.options.to).indexOf(".")},positionToValue:function(t){var i=t/this.domNode.width()*this.interval;if(i=parseFloat(i,10)+parseFloat(this.options.from,10),this.isDecimal()){var s=Math.round(Math.round(i/this.options.step)*this.options.step*100)/100;if(0!==s)for(s=""+s,-1===s.indexOf(".")&&(s+=".");s.length-s.indexOf(".")<3;)s+="0";else s="0.00";return s}return Math.round(i/this.options.step)*this.options.step},setInputValue:function(t,i){if(this.isSingle())this.options.value=i.toString();else{var s=this.options.value.split(",");t.hasClass("low")?this.options.value=i+","+s[1]:this.options.value=s[0]+","+i}this.inputNode.val()!==this.options.value&&(this.inputNode.val(this.options.value).trigger("change"),this.options.onstatechange.call(this,this.options.value))},getValue:function(){return this.options.value},getOptions:function(){return this.options},getRange:function(){return this.options.from+","+this.options.to},isReadonly:function(){this.domNode.toggleClass("slider-readonly",this.options.disable)},disable:function(){this.options.disable=!0,this.isReadonly()},enable:function(){this.options.disable=!1,this.isReadonly()},toggleDisable:function(){this.options.disable=!this.options.disable,this.isReadonly()},updateRange:function(t,i){var s=t.toString().split(",");this.interval=parseInt(s[1])-parseInt(s[0]),i?this.setValue(i):this.setValue(this.getValue())}};var e="jRange";$.fn[e]=function(i){var s=arguments,n;return this.each(function(){var a=$(this),h=$.data(this,"plugin_"+e),l="object"==typeof i&&i;h||(a.data("plugin_"+e,h=new o(this,l)),$(t).resize(function(){h.setValue(h.getValue())})),"string"==typeof i&&(n=h[i].apply(h,Array.prototype.slice.call(s,1)))}),n||this}}(jQuery,window,document); -------------------------------------------------------------------------------- /jquery.range.css: -------------------------------------------------------------------------------- 1 | .slider-container { 2 | width: 300px; 3 | font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; 4 | } 5 | .slider-container .back-bar { 6 | height: 10px; 7 | position: relative; 8 | } 9 | .slider-container .back-bar .selected-bar { 10 | position: absolute; 11 | height: 100%; 12 | } 13 | .slider-container .back-bar .pointer { 14 | position: absolute; 15 | width: 10px; 16 | height: 10px; 17 | background-color: red; 18 | cursor: col-resize; 19 | opacity: 1; 20 | z-index: 2; 21 | } 22 | .slider-container .back-bar .pointer.last-active { 23 | z-index: 3; 24 | } 25 | .slider-container .back-bar .pointer-label { 26 | position: absolute; 27 | top: -17px; 28 | font-size: 8px; 29 | background: white; 30 | white-space: nowrap; 31 | line-height: 1; 32 | } 33 | .slider-container .back-bar .focused { 34 | z-index: 10; 35 | } 36 | .slider-container .clickable-dummy { 37 | cursor: pointer; 38 | position: absolute; 39 | width: 100%; 40 | height: 100%; 41 | z-index: 1; 42 | } 43 | .slider-container .scale { 44 | top: 2px; 45 | position: relative; 46 | } 47 | .slider-container .scale span { 48 | position: absolute; 49 | height: 5px; 50 | border-left: 1px solid #999; 51 | font-size: 0; 52 | } 53 | .slider-container .scale ins { 54 | font-size: 9px; 55 | text-decoration: none; 56 | position: absolute; 57 | left: 0; 58 | top: 5px; 59 | color: #999; 60 | line-height: 1; 61 | } 62 | .slider-container.slider-readonly .clickable-dummy, 63 | .slider-container.slider-readonly .pointer { 64 | cursor: auto; 65 | } 66 | .theme-green .back-bar { 67 | height: 5px; 68 | border-radius: 2px; 69 | background-color: #eeeeee; 70 | background-color: #e7e7e7; 71 | background-image: -moz-linear-gradient(top, #eeeeee, #dddddd); 72 | background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#eeeeee), to(#dddddd)); 73 | background-image: -webkit-linear-gradient(top, #eeeeee, #dddddd); 74 | background-image: -o-linear-gradient(top, #eeeeee, #dddddd); 75 | background-image: linear-gradient(to bottom, #eeeeee, #dddddd); 76 | background-repeat: repeat-x; 77 | filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffeeeeee', endColorstr='#ffdddddd', GradientType=0); 78 | } 79 | .theme-green .back-bar .selected-bar { 80 | border-radius: 2px; 81 | background-color: #a1fad0; 82 | background-image: -moz-linear-gradient(top, #bdfade, #76fabc); 83 | background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#bdfade), to(#76fabc)); 84 | background-image: -webkit-linear-gradient(top, #bdfade, #76fabc); 85 | background-image: -o-linear-gradient(top, #bdfade, #76fabc); 86 | background-image: linear-gradient(to bottom, #bdfade, #76fabc); 87 | background-repeat: repeat-x; 88 | filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffbdfade', endColorstr='#ff76fabc', GradientType=0); 89 | } 90 | .theme-green .back-bar .pointer { 91 | width: 14px; 92 | height: 14px; 93 | top: -5px; 94 | -webkit-box-sizing: border-box; 95 | -moz-box-sizing: border-box; 96 | box-sizing: border-box; 97 | border-radius: 10px; 98 | border: 1px solid #AAA; 99 | background-color: #e7e7e7; 100 | background-image: -moz-linear-gradient(top, #eeeeee, #dddddd); 101 | background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#eeeeee), to(#dddddd)); 102 | background-image: -webkit-linear-gradient(top, #eeeeee, #dddddd); 103 | background-image: -o-linear-gradient(top, #eeeeee, #dddddd); 104 | background-image: linear-gradient(to bottom, #eeeeee, #dddddd); 105 | background-repeat: repeat-x; 106 | filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffeeeeee', endColorstr='#ffdddddd', GradientType=0); 107 | } 108 | .theme-green .back-bar .pointer-label { 109 | color: #999; 110 | } 111 | .theme-green .back-bar .focused { 112 | color: #333; 113 | } 114 | .theme-green .scale span { 115 | border-left: 1px solid #e5e5e5; 116 | } 117 | .theme-green .scale ins { 118 | color: #999; 119 | } 120 | .theme-blue .back-bar { 121 | height: 5px; 122 | border-radius: 2px; 123 | background-color: #eeeeee; 124 | background-color: #e7e7e7; 125 | background-image: -moz-linear-gradient(top, #eeeeee, #dddddd); 126 | background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#eeeeee), to(#dddddd)); 127 | background-image: -webkit-linear-gradient(top, #eeeeee, #dddddd); 128 | background-image: -o-linear-gradient(top, #eeeeee, #dddddd); 129 | background-image: linear-gradient(to bottom, #eeeeee, #dddddd); 130 | background-repeat: repeat-x; 131 | filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffeeeeee', endColorstr='#ffdddddd', GradientType=0); 132 | } 133 | .theme-blue .back-bar .selected-bar { 134 | border-radius: 2px; 135 | background-color: #92c1f9; 136 | background-image: -moz-linear-gradient(top, #b1d1f9, #64a8f9); 137 | background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#b1d1f9), to(#64a8f9)); 138 | background-image: -webkit-linear-gradient(top, #b1d1f9, #64a8f9); 139 | background-image: -o-linear-gradient(top, #b1d1f9, #64a8f9); 140 | background-image: linear-gradient(to bottom, #b1d1f9, #64a8f9); 141 | background-repeat: repeat-x; 142 | filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffb1d1f9', endColorstr='#ff64a8f9', GradientType=0); 143 | } 144 | .theme-blue .back-bar .pointer { 145 | width: 14px; 146 | height: 14px; 147 | top: -5px; 148 | -webkit-box-sizing: border-box; 149 | -moz-box-sizing: border-box; 150 | box-sizing: border-box; 151 | border-radius: 10px; 152 | border: 1px solid #AAA; 153 | background-color: #e7e7e7; 154 | background-image: -moz-linear-gradient(top, #eeeeee, #dddddd); 155 | background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#eeeeee), to(#dddddd)); 156 | background-image: -webkit-linear-gradient(top, #eeeeee, #dddddd); 157 | background-image: -o-linear-gradient(top, #eeeeee, #dddddd); 158 | background-image: linear-gradient(to bottom, #eeeeee, #dddddd); 159 | background-repeat: repeat-x; 160 | filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffeeeeee', endColorstr='#ffdddddd', GradientType=0); 161 | } 162 | .theme-blue .back-bar .pointer-label { 163 | color: #999; 164 | } 165 | .theme-blue .back-bar .focused { 166 | color: #333; 167 | } 168 | .theme-blue .scale span { 169 | border-left: 1px solid #e5e5e5; 170 | } 171 | .theme-blue .scale ins { 172 | color: #999; 173 | } 174 | -------------------------------------------------------------------------------- /jquery.range.js: -------------------------------------------------------------------------------- 1 | /*jshint multistr:true, curly: false */ 2 | /*global jQuery:false, define: false */ 3 | /** 4 | * jRange - Awesome range control 5 | * 6 | * Written by 7 | * ---------- 8 | * Nitin Hayaran (nitinhayaran@gmail.com) 9 | * 10 | * Licensed under the MIT (MIT-LICENSE.txt). 11 | * 12 | * @author Nitin Hayaran 13 | * @version 0.1-RELEASE 14 | * 15 | * Dependencies 16 | * ------------ 17 | * jQuery (http://jquery.com) 18 | * 19 | **/ 20 | ; 21 | (function($, window, document, undefined) { 22 | 'use strict'; 23 | 24 | var jRange = function() { 25 | return this.init.apply(this, arguments); 26 | }; 27 | jRange.prototype = { 28 | defaults: { 29 | onstatechange: function() {}, 30 | ondragend: function() {}, 31 | onbarclicked: function() {}, 32 | isRange: false, 33 | showLabels: true, 34 | showScale: true, 35 | step: 1, 36 | format: '%s', 37 | theme: 'theme-green', 38 | width: 300, 39 | disable: false, 40 | snap: false 41 | }, 42 | template: '
\ 43 |
\ 44 |
\ 45 |
123456
\ 46 |
456789
\ 47 |
\ 48 |
\ 49 |
\ 50 |
', 51 | init: function(node, options) { 52 | this.options = $.extend({}, this.defaults, options); 53 | this.inputNode = $(node); 54 | this.options.value = this.inputNode.val() || (this.options.isRange ? this.options.from + ',' + this.options.from : '' + this.options.from); 55 | this.domNode = $(this.template); 56 | this.domNode.addClass(this.options.theme); 57 | this.inputNode.after(this.domNode); 58 | this.domNode.on('change', this.onChange); 59 | this.pointers = $('.pointer', this.domNode); 60 | this.lowPointer = this.pointers.first(); 61 | this.highPointer = this.pointers.last(); 62 | this.labels = $('.pointer-label', this.domNode); 63 | this.lowLabel = this.labels.first(); 64 | this.highLabel = this.labels.last(); 65 | this.scale = $('.scale', this.domNode); 66 | this.bar = $('.selected-bar', this.domNode); 67 | this.clickableBar = this.domNode.find('.clickable-dummy'); 68 | this.interval = this.options.to - this.options.from; 69 | this.render(); 70 | }, 71 | render: function() { 72 | // Check if inputNode is visible, and have some width, so that we can set slider width accordingly. 73 | if (this.inputNode.width() === 0 && !this.options.width) { 74 | console.log('jRange : no width found, returning'); 75 | return; 76 | } else { 77 | this.options.width = this.options.width || this.inputNode.width(); 78 | this.domNode.width(this.options.width); 79 | this.inputNode.hide(); 80 | } 81 | 82 | if (this.isSingle()) { 83 | this.lowPointer.hide(); 84 | this.lowLabel.hide(); 85 | } 86 | if (!this.options.showLabels) { 87 | this.labels.hide(); 88 | } 89 | this.attachEvents(); 90 | if (this.options.showScale) { 91 | this.renderScale(); 92 | } 93 | this.setValue(this.options.value); 94 | }, 95 | isSingle: function() { 96 | if (typeof(this.options.value) === 'number') { 97 | return true; 98 | } 99 | return (this.options.value.indexOf(',') !== -1 || this.options.isRange) ? 100 | false : true; 101 | }, 102 | attachEvents: function() { 103 | this.clickableBar.click($.proxy(this.barClicked, this)); 104 | this.pointers.on('mousedown touchstart', $.proxy(this.onDragStart, this)); 105 | this.pointers.bind('dragstart', function(event) { 106 | event.preventDefault(); 107 | }); 108 | }, 109 | onDragStart: function(e) { 110 | if ( this.options.disable || (e.type === 'mousedown' && e.which !== 1)) { 111 | return; 112 | } 113 | e.stopPropagation(); 114 | e.preventDefault(); 115 | var pointer = $(e.target); 116 | this.pointers.removeClass('last-active'); 117 | pointer.addClass('focused last-active'); 118 | this[(pointer.hasClass('low') ? 'low' : 'high') + 'Label'].addClass('focused'); 119 | $(document).on('mousemove.slider touchmove.slider', $.proxy(this.onDrag, this, pointer)); 120 | $(document).on('mouseup.slider touchend.slider touchcancel.slider', $.proxy(this.onDragEnd, this)); 121 | }, 122 | onDrag: function(pointer, e) { 123 | e.stopPropagation(); 124 | e.preventDefault(); 125 | 126 | if (e.originalEvent.touches && e.originalEvent.touches.length) { 127 | e = e.originalEvent.touches[0]; 128 | } else if (e.originalEvent.changedTouches && e.originalEvent.changedTouches.length) { 129 | e = e.originalEvent.changedTouches[0]; 130 | } 131 | 132 | var position = e.clientX - this.domNode.offset().left; 133 | this.domNode.trigger('change', [this, pointer, position]); 134 | }, 135 | onDragEnd: function(e) { 136 | this.pointers.removeClass('focused') 137 | .trigger('rangeslideend'); 138 | this.labels.removeClass('focused'); 139 | $(document).off('.slider'); 140 | this.options.ondragend.call(this, this.options.value); 141 | }, 142 | barClicked: function(e) { 143 | if(this.options.disable) return; 144 | var x = e.pageX - this.clickableBar.offset().left; 145 | if (this.isSingle()) 146 | this.setPosition(this.pointers.last(), x, true, true); 147 | else { 148 | var firstLeft = Math.abs(parseFloat(this.pointers.first().css('left'), 10)), 149 | firstHalfWidth = this.pointers.first().width() / 2, 150 | lastLeft = Math.abs(parseFloat(this.pointers.last().css('left'), 10)), 151 | lastHalfWidth = this.pointers.first().width() / 2, 152 | leftSide = Math.abs(firstLeft - x + firstHalfWidth), 153 | rightSide = Math.abs(lastLeft - x + lastHalfWidth), 154 | pointer; 155 | 156 | if(leftSide == rightSide) { 157 | pointer = x < firstLeft ? this.pointers.first() : this.pointers.last(); 158 | } else { 159 | pointer = leftSide < rightSide ? this.pointers.first() : this.pointers.last(); 160 | } 161 | this.setPosition(pointer, x, true, true); 162 | } 163 | this.options.onbarclicked.call(this, this.options.value); 164 | }, 165 | onChange: function(e, self, pointer, position) { 166 | var min, max; 167 | min = 0; 168 | max = self.domNode.width(); 169 | 170 | if (!self.isSingle()) { 171 | min = pointer.hasClass('high') ? parseFloat(self.lowPointer.css("left")) + (self.lowPointer.width() / 2) : 0; 172 | max = pointer.hasClass('low') ? parseFloat(self.highPointer.css("left")) + (self.highPointer.width() / 2) : self.domNode.width(); 173 | } 174 | 175 | var value = Math.min(Math.max(position, min), max); 176 | self.setPosition(pointer, value, true); 177 | }, 178 | setPosition: function(pointer, position, isPx, animate) { 179 | var leftPos, rightPos, 180 | lowPos = parseFloat(this.lowPointer.css("left")), 181 | highPos = parseFloat(this.highPointer.css("left")) || 0, 182 | circleWidth = this.highPointer.width() / 2; 183 | if (!isPx) { 184 | position = this.prcToPx(position); 185 | } 186 | if(this.options.snap){ 187 | var expPos = this.correctPositionForSnap(position); 188 | if(expPos === -1){ 189 | return; 190 | }else{ 191 | position = expPos; 192 | } 193 | } 194 | if (pointer[0] === this.highPointer[0]) { 195 | highPos = Math.round(position - circleWidth); 196 | } else { 197 | lowPos = Math.round(position - circleWidth); 198 | } 199 | pointer[animate ? 'animate' : 'css']({ 200 | 'left': Math.round(position - circleWidth) 201 | }); 202 | if (this.isSingle()) { 203 | leftPos = 0; 204 | } else { 205 | leftPos = lowPos + circleWidth; 206 | rightPos = highPos + circleWidth; 207 | } 208 | var w = Math.round(highPos + circleWidth - leftPos); 209 | this.bar[animate ? 'animate' : 'css']({ 210 | 'width': Math.abs(w), 211 | 'left': (w>0) ? leftPos : leftPos + w 212 | }); 213 | this.showPointerValue(pointer, position, animate); 214 | this.isReadonly(); 215 | }, 216 | correctPositionForSnap: function(position){ 217 | var currentValue = this.positionToValue(position) - this.options.from; 218 | var diff = this.options.width / (this.interval / this.options.step), 219 | expectedPosition = (currentValue / this.options.step) * diff; 220 | if( position <= expectedPosition + diff / 2 && position >= expectedPosition - diff / 2){ 221 | return expectedPosition; 222 | }else{ 223 | return -1; 224 | } 225 | }, 226 | // will be called from outside 227 | setValue: function(value) { 228 | var values = value.toString().split(','); 229 | values[0] = Math.min(Math.max(values[0], this.options.from), this.options.to) + ''; 230 | if (values.length > 1){ 231 | values[1] = Math.min(Math.max(values[1], this.options.from), this.options.to) + ''; 232 | } 233 | this.options.value = value; 234 | var prc = this.valuesToPrc(values.length === 2 ? values : [0, values[0]]); 235 | if (this.isSingle()) { 236 | this.setPosition(this.highPointer, prc[1]); 237 | } else { 238 | this.setPosition(this.lowPointer, prc[0]); 239 | this.setPosition(this.highPointer, prc[1]); 240 | } 241 | }, 242 | renderScale: function() { 243 | var s = this.options.scale || [this.options.from, this.options.to]; 244 | var prc = Math.round((100 / (s.length - 1)) * 10) / 10; 245 | var str = ''; 246 | for (var i = 0; i < s.length; i++) { 247 | str += '' + (s[i] != '|' ? '' + s[i] + '' : '') + ''; 248 | } 249 | this.scale.html(str); 250 | 251 | $('ins', this.scale).each(function() { 252 | $(this).css({ 253 | marginLeft: -$(this).outerWidth() / 2 254 | }); 255 | }); 256 | }, 257 | getBarWidth: function() { 258 | var values = this.options.value.split(','); 259 | if (values.length > 1) { 260 | return parseFloat(values[1]) - parseFloat(values[0]); 261 | } else { 262 | return parseFloat(values[0]); 263 | } 264 | }, 265 | showPointerValue: function(pointer, position, animate) { 266 | var label = $('.pointer-label', this.domNode)[pointer.hasClass('low') ? 'first' : 'last'](); 267 | var text; 268 | var value = this.positionToValue(position); 269 | // Is it higer or lower than it should be? 270 | 271 | if ($.isFunction(this.options.format)) { 272 | var type = this.isSingle() ? undefined : (pointer.hasClass('low') ? 'low' : 'high'); 273 | text = this.options.format(value, type); 274 | } else { 275 | text = this.options.format.replace('%s', value); 276 | } 277 | 278 | var width = label.html(text).width(), 279 | left = position - width / 2; 280 | left = Math.min(Math.max(left, 0), this.options.width - width); 281 | label[animate ? 'animate' : 'css']({ 282 | left: left 283 | }); 284 | this.setInputValue(pointer, value); 285 | }, 286 | valuesToPrc: function(values) { 287 | var lowPrc = ((parseFloat(values[0]) - parseFloat(this.options.from)) * 100 / this.interval), 288 | highPrc = ((parseFloat(values[1]) - parseFloat(this.options.from)) * 100 / this.interval); 289 | return [lowPrc, highPrc]; 290 | }, 291 | prcToPx: function(prc) { 292 | return (this.domNode.width() * prc) / 100; 293 | }, 294 | isDecimal: function() { 295 | return ((this.options.value + this.options.from + this.options.to).indexOf(".")===-1) ? false : true; 296 | }, 297 | positionToValue: function(pos) { 298 | var value = (pos / this.domNode.width()) * this.interval; 299 | value = parseFloat(value, 10) + parseFloat(this.options.from, 10); 300 | if (this.isDecimal()) { 301 | var final = Math.round(Math.round(value / this.options.step) * this.options.step *100)/100; 302 | if (final!==0.0) { 303 | final = '' + final; 304 | if (final.indexOf(".")===-1) { 305 | final = final + "."; 306 | } 307 | while (final.length - final.indexOf('.')<3) { 308 | final = final + "0"; 309 | } 310 | } else { 311 | final = "0.00"; 312 | } 313 | return final; 314 | } else { 315 | return Math.round(value / this.options.step) * this.options.step; 316 | } 317 | }, 318 | setInputValue: function(pointer, v) { 319 | // if(!isChanged) return; 320 | if (this.isSingle()) { 321 | this.options.value = v.toString(); 322 | } else { 323 | var values = this.options.value.split(','); 324 | if (pointer.hasClass('low')) { 325 | this.options.value = v + ',' + values[1]; 326 | } else { 327 | this.options.value = values[0] + ',' + v; 328 | } 329 | } 330 | if (this.inputNode.val() !== this.options.value) { 331 | this.inputNode.val(this.options.value) 332 | .trigger('change'); 333 | this.options.onstatechange.call(this, this.options.value); 334 | } 335 | }, 336 | getValue: function() { 337 | return this.options.value; 338 | }, 339 | getOptions: function() { 340 | return this.options; 341 | }, 342 | getRange: function() { 343 | return this.options.from + "," + this.options.to; 344 | }, 345 | isReadonly: function(){ 346 | this.domNode.toggleClass('slider-readonly', this.options.disable); 347 | }, 348 | disable: function(){ 349 | this.options.disable = true; 350 | this.isReadonly(); 351 | }, 352 | enable: function(){ 353 | this.options.disable = false; 354 | this.isReadonly(); 355 | }, 356 | toggleDisable: function(){ 357 | this.options.disable = !this.options.disable; 358 | this.isReadonly(); 359 | }, 360 | updateRange: function(range, value) { 361 | var values = range.toString().split(','); 362 | this.interval = parseInt(values[1]) - parseInt(values[0]); 363 | if(value){ 364 | this.setValue(value); 365 | }else{ 366 | this.setValue(this.getValue()); 367 | } 368 | } 369 | }; 370 | 371 | var pluginName = 'jRange'; 372 | // A really lightweight plugin wrapper around the constructor, 373 | // preventing against multiple instantiations 374 | $.fn[pluginName] = function(option) { 375 | var args = arguments, 376 | result; 377 | 378 | this.each(function() { 379 | var $this = $(this), 380 | data = $.data(this, 'plugin_' + pluginName), 381 | options = typeof option === 'object' && option; 382 | if (!data) { 383 | $this.data('plugin_' + pluginName, (data = new jRange(this, options))); 384 | $(window).resize(function() { 385 | data.setValue(data.getValue()); 386 | }); // Update slider position when window is resized to keep it in sync with scale 387 | } 388 | // if first argument is a string, call silimarly named function 389 | // this gives flexibility to call functions of the plugin e.g. 390 | // - $('.dial').plugin('destroy'); 391 | // - $('.dial').plugin('render', $('.new-child')); 392 | if (typeof option === 'string') { 393 | result = data[option].apply(data, Array.prototype.slice.call(args, 1)); 394 | } 395 | }); 396 | 397 | // To enable plugin returns values 398 | return result || this; 399 | }; 400 | 401 | })(jQuery, window, document); 402 | -------------------------------------------------------------------------------- /jquery.range.less: -------------------------------------------------------------------------------- 1 | #gradient { 2 | .horizontal(@startColor: #555, @endColor: #333) { 3 | background-color: @endColor; 4 | background-image: -moz-linear-gradient(left, @startColor, @endColor); // FF 3.6+ 5 | background-image: -webkit-gradient(linear, 0 0, 100% 0, from(@startColor), to(@endColor)); // Safari 4+, Chrome 2+ 6 | background-image: -webkit-linear-gradient(left, @startColor, @endColor); // Safari 5.1+, Chrome 10+ 7 | background-image: -o-linear-gradient(left, @startColor, @endColor); // Opera 11.10 8 | background-image: linear-gradient(to right, @startColor, @endColor); // Standard, IE10 9 | background-repeat: repeat-x; 10 | filter: e(%("progid:DXImageTransform.Microsoft.gradient(startColorstr='%d', endColorstr='%d', GradientType=1)",argb(@startColor),argb(@endColor))); // IE9 and down 11 | } 12 | .vertical(@startColor: #555, @endColor: #333) { 13 | background-color: mix(@startColor, @endColor, 60%); 14 | background-image: -moz-linear-gradient(top, @startColor, @endColor); // FF 3.6+ 15 | background-image: -webkit-gradient(linear, 0 0, 0 100%, from(@startColor), to(@endColor)); // Safari 4+, Chrome 2+ 16 | background-image: -webkit-linear-gradient(top, @startColor, @endColor); // Safari 5.1+, Chrome 10+ 17 | background-image: -o-linear-gradient(top, @startColor, @endColor); // Opera 11.10 18 | background-image: linear-gradient(to bottom, @startColor, @endColor); // Standard, IE10 19 | background-repeat: repeat-x; 20 | filter: e(%("progid:DXImageTransform.Microsoft.gradient(startColorstr='%d', endColorstr='%d', GradientType=0)",argb(@startColor),argb(@endColor))); // IE9 and down 21 | } 22 | .directional(@startColor: #555, @endColor: #333, @deg: 45deg) { 23 | background-color: @endColor; 24 | background-repeat: repeat-x; 25 | background-image: -moz-linear-gradient(@deg, @startColor, @endColor); // FF 3.6+ 26 | background-image: -webkit-linear-gradient(@deg, @startColor, @endColor); // Safari 5.1+, Chrome 10+ 27 | background-image: -o-linear-gradient(@deg, @startColor, @endColor); // Opera 11.10 28 | background-image: linear-gradient(@deg, @startColor, @endColor); // Standard, IE10 29 | } 30 | .vertical-three-colors(@startColor: #00b3ee, @midColor: #7a43b6, @colorStop: 50%, @endColor: #c3325f) { 31 | background-color: mix(@midColor, @endColor, 80%); 32 | background-image: -webkit-gradient(linear, 0 0, 0 100%, from(@startColor), color-stop(@colorStop, @midColor), to(@endColor)); 33 | background-image: -webkit-linear-gradient(@startColor, @midColor @colorStop, @endColor); 34 | background-image: -moz-linear-gradient(top, @startColor, @midColor @colorStop, @endColor); 35 | background-image: -o-linear-gradient(@startColor, @midColor @colorStop, @endColor); 36 | background-image: linear-gradient(@startColor, @midColor @colorStop, @endColor); 37 | background-repeat: no-repeat; 38 | filter: e(%("progid:DXImageTransform.Microsoft.gradient(startColorstr='%d', endColorstr='%d', GradientType=0)",argb(@startColor),argb(@endColor))); // IE9 and down, gets no color-stop at all for proper fallback 39 | } 40 | .radial(@innerColor: #555, @outerColor: #333) { 41 | background-color: @outerColor; 42 | background-image: -webkit-gradient(radial, center center, 0, center center, 460, from(@innerColor), to(@outerColor)); 43 | background-image: -webkit-radial-gradient(circle, @innerColor, @outerColor); 44 | background-image: -moz-radial-gradient(circle, @innerColor, @outerColor); 45 | background-image: -o-radial-gradient(circle, @innerColor, @outerColor); 46 | background-repeat: no-repeat; 47 | } 48 | .striped(@color: #555, @angle: 45deg) { 49 | background-color: @color; 50 | background-image: -webkit-gradient(linear, 0 100%, 100% 0, color-stop(.25, rgba(255,255,255,.15)), color-stop(.25, transparent), color-stop(.5, transparent), color-stop(.5, rgba(255,255,255,.15)), color-stop(.75, rgba(255,255,255,.15)), color-stop(.75, transparent), to(transparent)); 51 | background-image: -webkit-linear-gradient(@angle, rgba(255,255,255,.15) 25%, transparent 25%, transparent 50%, rgba(255,255,255,.15) 50%, rgba(255,255,255,.15) 75%, transparent 75%, transparent); 52 | background-image: -moz-linear-gradient(@angle, rgba(255,255,255,.15) 25%, transparent 25%, transparent 50%, rgba(255,255,255,.15) 50%, rgba(255,255,255,.15) 75%, transparent 75%, transparent); 53 | background-image: -o-linear-gradient(@angle, rgba(255,255,255,.15) 25%, transparent 25%, transparent 50%, rgba(255,255,255,.15) 50%, rgba(255,255,255,.15) 75%, transparent 75%, transparent); 54 | background-image: linear-gradient(@angle, rgba(255,255,255,.15) 25%, transparent 25%, transparent 50%, rgba(255,255,255,.15) 50%, rgba(255,255,255,.15) 75%, transparent 75%, transparent); 55 | } 56 | } 57 | 58 | .slider-container { 59 | width: 300px; 60 | font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; 61 | .back-bar { 62 | height: 10px; 63 | position: relative; 64 | .selected-bar { 65 | position: absolute; 66 | height: 100%; 67 | } 68 | .pointer { 69 | position: absolute; 70 | width: 10px; 71 | height: 10px; 72 | background-color: red; 73 | cursor: col-resize; 74 | opacity: 1; 75 | z-index: 2; 76 | &.last-active{ 77 | z-index: 3; 78 | } 79 | } 80 | .pointer-label { 81 | position: absolute; 82 | top: -17px; 83 | font-size: 8px; 84 | background: white; 85 | white-space: nowrap; 86 | line-height: 1; 87 | } 88 | .focused { 89 | z-index: 10; 90 | } 91 | } 92 | .clickable-dummy { 93 | cursor: pointer; 94 | position: absolute; 95 | width: 100%; 96 | height: 100%; 97 | z-index: 1; 98 | } 99 | .scale { 100 | top: 2px; 101 | position: relative; 102 | span { 103 | position: absolute; 104 | height: 5px; 105 | border-left: 1px solid #999; 106 | font-size: 0; 107 | } 108 | ins { 109 | font-size: 9px; 110 | text-decoration: none; 111 | position: absolute; 112 | left: 0; 113 | top: 5px; 114 | color: #999; 115 | line-height: 1; 116 | } 117 | } 118 | &.slider-readonly{ 119 | .clickable-dummy, .pointer { 120 | cursor: auto; 121 | } 122 | } 123 | } 124 | .theme-green { 125 | .back-bar { 126 | height: 5px; 127 | border-radius: 2px; 128 | background-color: #eeeeee; 129 | #gradient > .vertical(#eeeeee, #dddddd); 130 | .selected-bar { 131 | border-radius: 2px; 132 | #gradient > .vertical(#bdfade, #76fabc); 133 | } 134 | .pointer { 135 | width: 14px; 136 | height: 14px; 137 | top: -5px; 138 | -webkit-box-sizing: border-box; 139 | -moz-box-sizing: border-box; 140 | box-sizing: border-box; 141 | border-radius: 10px; 142 | border: 1px solid #AAA; 143 | #gradient > .vertical(#eeeeee, #dddddd); 144 | } 145 | .pointer-label { 146 | color: #999; 147 | } 148 | .focused { 149 | color: #333; 150 | } 151 | } 152 | .scale { 153 | span { 154 | border-left: 1px solid #e5e5e5; 155 | } 156 | ins { 157 | color: #999; 158 | } 159 | } 160 | } 161 | 162 | .theme-blue { 163 | .back-bar { 164 | height: 5px; 165 | border-radius: 2px; 166 | background-color: #eeeeee; 167 | #gradient > .vertical(#eeeeee, #dddddd); 168 | .selected-bar { 169 | border-radius: 2px; 170 | #gradient > .vertical(#b1d1f9, #64a8f9); 171 | } 172 | .pointer { 173 | width: 14px; 174 | height: 14px; 175 | top: -5px; 176 | -webkit-box-sizing: border-box; 177 | -moz-box-sizing: border-box; 178 | box-sizing: border-box; 179 | border-radius: 10px; 180 | border: 1px solid #AAA; 181 | #gradient > .vertical(#eeeeee, #dddddd); 182 | } 183 | .pointer-label { 184 | color: #999; 185 | } 186 | .focused { 187 | color: #333; 188 | } 189 | } 190 | .scale { 191 | span { 192 | border-left: 1px solid #e5e5e5; 193 | } 194 | ins { 195 | color: #999; 196 | } 197 | } 198 | } 199 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "jquery-range", 3 | "version": "1.0.0", 4 | "description": "jQuery plugin to create range selector", 5 | "main": "jquery.range-min.js", 6 | "scripts": { 7 | "test": "echo \"Error: no test specified\" && exit 1" 8 | }, 9 | "repository": { 10 | "type": "git", 11 | "url": "git+https://github.com/nitinhayaran/jRange.git" 12 | }, 13 | "keywords": [ 14 | "jquery", 15 | "range" 16 | ], 17 | "author": "Nitin Hayaran ", 18 | "license": "ISC", 19 | "bugs": { 20 | "url": "https://github.com/nitinhayaran/jRange/issues" 21 | }, 22 | "homepage": "https://github.com/nitinhayaran/jRange#readme" 23 | } 24 | --------------------------------------------------------------------------------