Wednesday, August 13, 2014

Jquery Multiple Range Slider With Floating Points

I was working on a GIS project, which required four range sliders with floating points to set LCLU change threshold. I finally find out a nice jQuery based multiple range slider at http://jsfiddle.net/q5WEe/1/   The compiled fiddle as a web page source is shown in the Part 1.

Then, my goal was to put floating points on the slider bar value display, but the native jQuery slider bar doesn't support the floating point. jQuery always roundup the floating values to the nearest integer. To display the floating point (for example,0.5 break), I multiplied the max  and values with two and divided the display value with two (Part 2) and then I got jQuery slider bar with floating value as below.


Fiddle it- http://jsfiddle.net/q5WEe/512/
Part 1.
 <html>  
 <head>  
      <script src="//code.jquery.com/jquery-1.10.2.js"></script>  
    <script src="//code.jquery.com/ui/1.11.0/jquery-ui.js"></script>  
    <style type="text/css">  
    #demo-frame > div.demo { padding: 10px !important; };  
 .ui-widget {  
   font-family: Verdana,Arial,sans-serif;  
   font-size: 1.1em;  
 }  
 .ui-widget .ui-widget {  
   font-size: 1em;  
 }  
 .ui-widget input, .ui-widget select, .ui-widget textarea, .ui-widget button {  
   font-family: Verdana,Arial,sans-serif;  
   font-size: 1em;  
 }  
 .ui-widget-content {  
   background: url("images/ui-bg_flat_75_ffffff_40x100.png") repeat-x scroll 50% 50% #FFFFFF;  
   border: 1px solid #AAAAAA;  
   color: #222222;  
 }  
 .ui-widget-content a {  
   color: #222222;  
 }  
 .ui-widget-header {  
   background: url("images/ui-bg_highlight-soft_75_cccccc_1x100.png") repeat-x scroll 50% 50% #CCCCCC;  
   border: 1px solid #AAAAAA;  
   color: #222222;  
   font-weight: bold;  
 }  
 .ui-widget-header a {  
   color: #222222;  
 }  
 .ui-state-default, .ui-widget-content .ui-state-default, .ui-widget-header .ui-state-default {  
   background: url("images/ui-bg_glass_75_e6e6e6_1x400.png") repeat-x scroll 50% 50% #E6E6E6;  
   border: 1px solid #D3D3D3;  
   color: #555555;  
   font-weight: normal;  
 }  
 .ui-state-default a, .ui-state-default a:link, .ui-state-default a:visited {  
   color: #555555;  
   text-decoration: none;  
 }  
 .ui-state-hover, .ui-widget-content .ui-state-hover, .ui-widget-header .ui-state-hover, .ui-state-focus, .ui-widget-content .ui-state-focus, .ui-widget-header .ui-state-focus {  
   background: url("images/ui-bg_glass_75_dadada_1x400.png") repeat-x scroll 50% 50% #DADADA;  
   border: 1px solid #999999;  
   color: #212121;  
   font-weight: normal;  
 }  
 .ui-state-hover a, .ui-state-hover a:hover {  
   color: #212121;  
   text-decoration: none;  
 }  
 .ui-state-active, .ui-widget-content .ui-state-active, .ui-widget-header .ui-state-active {  
   background: url("images/ui-bg_glass_65_ffffff_1x400.png") repeat-x scroll 50% 50% #FFFFFF;  
   border: 1px solid #AAAAAA;  
   color: #212121;  
   font-weight: normal;  
 }  
 .ui-state-active a, .ui-state-active a:link, .ui-state-active a:visited {  
   color: #212121;  
   text-decoration: none;  
 }  
 .ui-widget *:active {  
   outline: medium none;  
 }  
 .ui-state-highlight, .ui-widget-content .ui-state-highlight, .ui-widget-header .ui-state-highlight {  
   background: url("images/ui-bg_glass_55_fbf9ee_1x400.png") repeat-x scroll 50% 50% #FBF9EE;  
   border: 1px solid #FCEFA1;  
   color: #363636;  
 }  
 .ui-state-highlight a, .ui-widget-content .ui-state-highlight a, .ui-widget-header .ui-state-highlight a {  
   color: #363636;  
 }  
 .ui-state-error, .ui-widget-content .ui-state-error, .ui-widget-header .ui-state-error {  
   background: url("images/ui-bg_glass_95_fef1ec_1x400.png") repeat-x scroll 50% 50% #FEF1EC;  
   border: 1px solid #CD0A0A;  
   color: #CD0A0A;  
 }  
 .ui-state-error a, .ui-widget-content .ui-state-error a, .ui-widget-header .ui-state-error a {  
   color: #CD0A0A;  
 }  
 .ui-state-error-text, .ui-widget-content .ui-state-error-text, .ui-widget-header .ui-state-error-text {  
   color: #CD0A0A;  
 }  
 .ui-priority-primary, .ui-widget-content .ui-priority-primary, .ui-widget-header .ui-priority-primary {  
   font-weight: bold;  
 }  
 .ui-priority-secondary, .ui-widget-content .ui-priority-secondary, .ui-widget-header .ui-priority-secondary {  
   font-weight: normal;  
   opacity: 0.7;  
 }  
 .ui-state-disabled, .ui-widget-content .ui-state-disabled, .ui-widget-header .ui-state-disabled {  
   background-image: none;  
   opacity: 0.35;  
 }  
 .ui-icon {  
   background-image: url("images/ui-icons_222222_256x240.png");  
   height: 16px;  
   width: 16px;  
 }  
 .ui-widget-content .ui-icon {  
   background-image: url("images/ui-icons_222222_256x240.png");  
 }  
 .ui-widget-header .ui-icon {  
   background-image: url("images/ui-icons_222222_256x240.png");  
 }  
 .ui-state-default .ui-icon {  
   background-image: url("images/ui-icons_888888_256x240.png");  
 }  
 .ui-state-hover .ui-icon, .ui-state-focus .ui-icon {  
   background-image: url("images/ui-icons_454545_256x240.png");  
 }  
 .ui-state-active .ui-icon {  
   background-image: url("images/ui-icons_454545_256x240.png");  
 }  
 .ui-state-highlight .ui-icon {  
   background-image: url("images/ui-icons_2e83ff_256x240.png");  
 }  
 .ui-state-error .ui-icon, .ui-state-error-text .ui-icon {  
   background-image: url("images/ui-icons_cd0a0a_256x240.png");  
 }  
 .ui-icon-carat-1-n {  
   background-position: 0 0;  
 }  
 .ui-icon-carat-1-ne {  
   background-position: -16px 0;  
 }  
 .ui-icon-carat-1-e {  
   background-position: -32px 0;  
 }  
 .ui-icon-carat-1-se {  
   background-position: -48px 0;  
 }  
 .ui-icon-carat-1-s {  
   background-position: -64px 0;  
 }  
 .ui-icon-carat-1-sw {  
   background-position: -80px 0;  
 }  
 .ui-icon-carat-1-w {  
   background-position: -96px 0;  
 }  
 .ui-icon-carat-1-nw {  
   background-position: -112px 0;  
 }  
 .ui-icon-carat-2-n-s {  
   background-position: -128px 0;  
 }  
 .ui-icon-carat-2-e-w {  
   background-position: -144px 0;  
 }  
 .ui-icon-triangle-1-n {  
   background-position: 0 -16px;  
 }  
 .ui-icon-triangle-1-ne {  
   background-position: -16px -16px;  
 }  
 .ui-icon-triangle-1-e {  
   background-position: -32px -16px;  
 }  
 .ui-icon-triangle-1-se {  
   background-position: -48px -16px;  
 }  
 .ui-icon-triangle-1-s {  
   background-position: -64px -16px;  
 }  
 .ui-icon-triangle-1-sw {  
   background-position: -80px -16px;  
 }  
 .ui-icon-triangle-1-w {  
   background-position: -96px -16px;  
 }  
 .ui-icon-triangle-1-nw {  
   background-position: -112px -16px;  
 }  
 .ui-icon-triangle-2-n-s {  
   background-position: -128px -16px;  
 }  
 .ui-icon-triangle-2-e-w {  
   background-position: -144px -16px;  
 }  
 .ui-icon-arrow-1-n {  
   background-position: 0 -32px;  
 }  
 .ui-icon-arrow-1-ne {  
   background-position: -16px -32px;  
 }  
 .ui-icon-arrow-1-e {  
   background-position: -32px -32px;  
 }  
 .ui-icon-arrow-1-se {  
   background-position: -48px -32px;  
 }  
 .ui-icon-arrow-1-s {  
   background-position: -64px -32px;  
 }  
 .ui-icon-arrow-1-sw {  
   background-position: -80px -32px;  
 }  
 .ui-icon-arrow-1-w {  
   background-position: -96px -32px;  
 }  
 .ui-icon-arrow-1-nw {  
   background-position: -112px -32px;  
 }  
 .ui-icon-arrow-2-n-s {  
   background-position: -128px -32px;  
 }  
 .ui-icon-arrow-2-ne-sw {  
   background-position: -144px -32px;  
 }  
 .ui-icon-arrow-2-e-w {  
   background-position: -160px -32px;  
 }  
 .ui-icon-arrow-2-se-nw {  
   background-position: -176px -32px;  
 }  
 .ui-icon-arrowstop-1-n {  
   background-position: -192px -32px;  
 }  
 .ui-icon-arrowstop-1-e {  
   background-position: -208px -32px;  
 }  
 .ui-icon-arrowstop-1-s {  
   background-position: -224px -32px;  
 }  
 .ui-icon-arrowstop-1-w {  
   background-position: -240px -32px;  
 }  
 .ui-icon-arrowthick-1-n {  
   background-position: 0 -48px;  
 }  
 .ui-icon-arrowthick-1-ne {  
   background-position: -16px -48px;  
 }  
 .ui-icon-arrowthick-1-e {  
   background-position: -32px -48px;  
 }  
 .ui-icon-arrowthick-1-se {  
   background-position: -48px -48px;  
 }  
 .ui-icon-arrowthick-1-s {  
   background-position: -64px -48px;  
 }  
 .ui-icon-arrowthick-1-sw {  
   background-position: -80px -48px;  
 }  
 .ui-icon-arrowthick-1-w {  
   background-position: -96px -48px;  
 }  
 .ui-icon-arrowthick-1-nw {  
   background-position: -112px -48px;  
 }  
 .ui-icon-arrowthick-2-n-s {  
   background-position: -128px -48px;  
 }  
 .ui-icon-arrowthick-2-ne-sw {  
   background-position: -144px -48px;  
 }  
 .ui-icon-arrowthick-2-e-w {  
   background-position: -160px -48px;  
 }  
 .ui-icon-arrowthick-2-se-nw {  
   background-position: -176px -48px;  
 }  
 .ui-icon-arrowthickstop-1-n {  
   background-position: -192px -48px;  
 }  
 .ui-icon-arrowthickstop-1-e {  
   background-position: -208px -48px;  
 }  
 .ui-icon-arrowthickstop-1-s {  
   background-position: -224px -48px;  
 }  
 .ui-icon-arrowthickstop-1-w {  
   background-position: -240px -48px;  
 }  
 .ui-icon-arrowreturnthick-1-w {  
   background-position: 0 -64px;  
 }  
 .ui-icon-arrowreturnthick-1-n {  
   background-position: -16px -64px;  
 }  
 .ui-icon-arrowreturnthick-1-e {  
   background-position: -32px -64px;  
 }  
 .ui-icon-arrowreturnthick-1-s {  
   background-position: -48px -64px;  
 }  
 .ui-icon-arrowreturn-1-w {  
   background-position: -64px -64px;  
 }  
 .ui-icon-arrowreturn-1-n {  
   background-position: -80px -64px;  
 }  
 .ui-icon-arrowreturn-1-e {  
   background-position: -96px -64px;  
 }  
 .ui-icon-arrowreturn-1-s {  
   background-position: -112px -64px;  
 }  
 .ui-icon-arrowrefresh-1-w {  
   background-position: -128px -64px;  
 }  
 .ui-icon-arrowrefresh-1-n {  
   background-position: -144px -64px;  
 }  
 .ui-icon-arrowrefresh-1-e {  
   background-position: -160px -64px;  
 }  
 .ui-icon-arrowrefresh-1-s {  
   background-position: -176px -64px;  
 }  
 .ui-icon-arrow-4 {  
   background-position: 0 -80px;  
 }  
 .ui-icon-arrow-4-diag {  
   background-position: -16px -80px;  
 }  
 .ui-icon-extlink {  
   background-position: -32px -80px;  
 }  
 .ui-icon-newwin {  
   background-position: -48px -80px;  
 }  
 .ui-icon-refresh {  
   background-position: -64px -80px;  
 }  
 .ui-icon-shuffle {  
   background-position: -80px -80px;  
 }  
 .ui-icon-transfer-e-w {  
   background-position: -96px -80px;  
 }  
 .ui-icon-transferthick-e-w {  
   background-position: -112px -80px;  
 }  
 .ui-icon-folder-collapsed {  
   background-position: 0 -96px;  
 }  
 .ui-icon-folder-open {  
   background-position: -16px -96px;  
 }  
 .ui-icon-document {  
   background-position: -32px -96px;  
 }  
 .ui-icon-document-b {  
   background-position: -48px -96px;  
 }  
 .ui-icon-note {  
   background-position: -64px -96px;  
 }  
 .ui-icon-mail-closed {  
   background-position: -80px -96px;  
 }  
 .ui-icon-mail-open {  
   background-position: -96px -96px;  
 }  
 .ui-icon-suitcase {  
   background-position: -112px -96px;  
 }  
 .ui-icon-comment {  
   background-position: -128px -96px;  
 }  
 .ui-icon-person {  
   background-position: -144px -96px;  
 }  
 .ui-icon-print {  
   background-position: -160px -96px;  
 }  
 .ui-icon-trash {  
   background-position: -176px -96px;  
 }  
 .ui-icon-locked {  
   background-position: -192px -96px;  
 }  
 .ui-icon-unlocked {  
   background-position: -208px -96px;  
 }  
 .ui-icon-bookmark {  
   background-position: -224px -96px;  
 }  
 .ui-icon-tag {  
   background-position: -240px -96px;  
 }  
 .ui-icon-home {  
   background-position: 0 -112px;  
 }  
 .ui-icon-flag {  
   background-position: -16px -112px;  
 }  
 .ui-icon-calendar {  
   background-position: -32px -112px;  
 }  
 .ui-icon-cart {  
   background-position: -48px -112px;  
 }  
 .ui-icon-pencil {  
   background-position: -64px -112px;  
 }  
 .ui-icon-clock {  
   background-position: -80px -112px;  
 }  
 .ui-icon-disk {  
   background-position: -96px -112px;  
 }  
 .ui-icon-calculator {  
   background-position: -112px -112px;  
 }  
 .ui-icon-zoomin {  
   background-position: -128px -112px;  
 }  
 .ui-icon-zoomout {  
   background-position: -144px -112px;  
 }  
 .ui-icon-search {  
   background-position: -160px -112px;  
 }  
 .ui-icon-wrench {  
   background-position: -176px -112px;  
 }  
 .ui-icon-gear {  
   background-position: -192px -112px;  
 }  
 .ui-icon-heart {  
   background-position: -208px -112px;  
 }  
 .ui-icon-star {  
   background-position: -224px -112px;  
 }  
 .ui-icon-link {  
   background-position: -240px -112px;  
 }  
 .ui-icon-cancel {  
   background-position: 0 -128px;  
 }  
 .ui-icon-plus {  
   background-position: -16px -128px;  
 }  
 .ui-icon-plusthick {  
   background-position: -32px -128px;  
 }  
 .ui-icon-minus {  
   background-position: -48px -128px;  
 }  
 .ui-icon-minusthick {  
   background-position: -64px -128px;  
 }  
 .ui-icon-close {  
   background-position: -80px -128px;  
 }  
 .ui-icon-closethick {  
   background-position: -96px -128px;  
 }  
 .ui-icon-key {  
   background-position: -112px -128px;  
 }  
 .ui-icon-lightbulb {  
   background-position: -128px -128px;  
 }  
 .ui-icon-scissors {  
   background-position: -144px -128px;  
 }  
 .ui-icon-clipboard {  
   background-position: -160px -128px;  
 }  
 .ui-icon-copy {  
   background-position: -176px -128px;  
 }  
 .ui-icon-contact {  
   background-position: -192px -128px;  
 }  
 .ui-icon-image {  
   background-position: -208px -128px;  
 }  
 .ui-icon-video {  
   background-position: -224px -128px;  
 }  
 .ui-icon-script {  
   background-position: -240px -128px;  
 }  
 .ui-icon-alert {  
   background-position: 0 -144px;  
 }  
 .ui-icon-info {  
   background-position: -16px -144px;  
 }  
 .ui-icon-notice {  
   background-position: -32px -144px;  
 }  
 .ui-icon-help {  
   background-position: -48px -144px;  
 }  
 .ui-icon-check {  
   background-position: -64px -144px;  
 }  
 .ui-icon-bullet {  
   background-position: -80px -144px;  
 }  
 .ui-icon-radio-off {  
   background-position: -96px -144px;  
 }  
 .ui-icon-radio-on {  
   background-position: -112px -144px;  
 }  
 .ui-icon-pin-w {  
   background-position: -128px -144px;  
 }  
 .ui-icon-pin-s {  
   background-position: -144px -144px;  
 }  
 .ui-icon-play {  
   background-position: 0 -160px;  
 }  
 .ui-icon-pause {  
   background-position: -16px -160px;  
 }  
 .ui-icon-seek-next {  
   background-position: -32px -160px;  
 }  
 .ui-icon-seek-prev {  
   background-position: -48px -160px;  
 }  
 .ui-icon-seek-end {  
   background-position: -64px -160px;  
 }  
 .ui-icon-seek-start {  
   background-position: -80px -160px;  
 }  
 .ui-icon-seek-first {  
   background-position: -80px -160px;  
 }  
 .ui-icon-stop {  
   background-position: -96px -160px;  
 }  
 .ui-icon-eject {  
   background-position: -112px -160px;  
 }  
 .ui-icon-volume-off {  
   background-position: -128px -160px;  
 }  
 .ui-icon-volume-on {  
   background-position: -144px -160px;  
 }  
 .ui-icon-power {  
   background-position: 0 -176px;  
 }  
 .ui-icon-signal-diag {  
   background-position: -16px -176px;  
 }  
 .ui-icon-signal {  
   background-position: -32px -176px;  
 }  
 .ui-icon-battery-0 {  
   background-position: -48px -176px;  
 }  
 .ui-icon-battery-1 {  
   background-position: -64px -176px;  
 }  
 .ui-icon-battery-2 {  
   background-position: -80px -176px;  
 }  
 .ui-icon-battery-3 {  
   background-position: -96px -176px;  
 }  
 .ui-icon-circle-plus {  
   background-position: 0 -192px;  
 }  
 .ui-icon-circle-minus {  
   background-position: -16px -192px;  
 }  
 .ui-icon-circle-close {  
   background-position: -32px -192px;  
 }  
 .ui-icon-circle-triangle-e {  
   background-position: -48px -192px;  
 }  
 .ui-icon-circle-triangle-s {  
   background-position: -64px -192px;  
 }  
 .ui-icon-circle-triangle-w {  
   background-position: -80px -192px;  
 }  
 .ui-icon-circle-triangle-n {  
   background-position: -96px -192px;  
 }  
 .ui-icon-circle-arrow-e {  
   background-position: -112px -192px;  
 }  
 .ui-icon-circle-arrow-s {  
   background-position: -128px -192px;  
 }  
 .ui-icon-circle-arrow-w {  
   background-position: -144px -192px;  
 }  
 .ui-icon-circle-arrow-n {  
   background-position: -160px -192px;  
 }  
 .ui-icon-circle-zoomin {  
   background-position: -176px -192px;  
 }  
 .ui-icon-circle-zoomout {  
   background-position: -192px -192px;  
 }  
 .ui-icon-circle-check {  
   background-position: -208px -192px;  
 }  
 .ui-icon-circlesmall-plus {  
   background-position: 0 -208px;  
 }  
 .ui-icon-circlesmall-minus {  
   background-position: -16px -208px;  
 }  
 .ui-icon-circlesmall-close {  
   background-position: -32px -208px;  
 }  
 .ui-icon-squaresmall-plus {  
   background-position: -48px -208px;  
 }  
 .ui-icon-squaresmall-minus {  
   background-position: -64px -208px;  
 }  
 .ui-icon-squaresmall-close {  
   background-position: -80px -208px;  
 }  
 .ui-icon-grip-dotted-vertical {  
   background-position: 0 -224px;  
 }  
 .ui-icon-grip-dotted-horizontal {  
   background-position: -16px -224px;  
 }  
 .ui-icon-grip-solid-vertical {  
   background-position: -32px -224px;  
 }  
 .ui-icon-grip-solid-horizontal {  
   background-position: -48px -224px;  
 }  
 .ui-icon-gripsmall-diagonal-se {  
   background-position: -64px -224px;  
 }  
 .ui-icon-grip-diagonal-se {  
   background-position: -80px -224px;  
 }  
 .ui-corner-all, .ui-corner-top, .ui-corner-left, .ui-corner-tl {  
   border-top-left-radius: 4px;  
 }  
 .ui-corner-all, .ui-corner-top, .ui-corner-right, .ui-corner-tr {  
   border-top-right-radius: 4px;  
 }  
 .ui-corner-all, .ui-corner-bottom, .ui-corner-left, .ui-corner-bl {  
   border-bottom-left-radius: 4px;  
 }  
 .ui-corner-all, .ui-corner-bottom, .ui-corner-right, .ui-corner-br {  
   border-bottom-right-radius: 4px;  
 }  
 .ui-widget-overlay {  
   background: url("images/ui-bg_flat_0_aaaaaa_40x100.png") repeat-x scroll 50% 50% #AAAAAA;  
   opacity: 0.3;  
 }  
 .ui-widget-shadow {  
   background: url("images/ui-bg_flat_0_aaaaaa_40x100.png") repeat-x scroll 50% 50% #AAAAAA;  
   border-radius: 8px 8px 8px 8px;  
   margin: -8px 0 0 -8px;  
   opacity: 0.3;  
   padding: 8px;  
 }  
 .ui-slider {  
   position: relative;  
   text-align: left;  
 }  
 .ui-slider .ui-slider-handle {  
   cursor: default;  
   height: 1.2em;  
   position: absolute;  
   width: 1.2em;  
   z-index: 2;  
 }  
 .ui-slider .ui-slider-range {  
   background-position: 0 0;  
   border: 0 none;  
   display: block;  
   font-size: 0.7em;  
   position: absolute;  
   z-index: 1;  
 }  
 .ui-slider-horizontal {  
   height: 0.8em;  
 }  
 .ui-slider-horizontal .ui-slider-handle {  
   margin-left: -0.6em;  
   top: -0.3em;  
 }  
 .ui-slider-horizontal .ui-slider-range {  
   height: 100%;  
   top: 0;  
 }  
 .ui-slider-horizontal .ui-slider-range-min {  
   left: 0;  
 }  
 .ui-slider-horizontal .ui-slider-range-max {  
   right: 0;  
 }  
 .ui-slider-vertical {  
   height: 100px;  
   width: 0.8em;  
 }  
 .ui-slider-vertical .ui-slider-handle {  
   left: -0.3em;  
   margin-bottom: -0.6em;  
   margin-left: 0;  
 }  
 .ui-slider-vertical .ui-slider-range {  
   left: 0;  
   width: 100%;  
 }  
 .ui-slider-vertical .ui-slider-range-min {  
   bottom: 0;  
 }  
 .ui-slider-vertical .ui-slider-range-max {  
   top: 0;  
 }  
    </style>  
 <script>  
 /*  
  * jQuery UI Slider 1.8.16  
  *  
  * Copyright 2011, AUTHORS.txt (http://jqueryui.com/about)  
  * Dual licensed under the MIT or GPL Version 2 licenses.  
  * http://jquery.org/license  
  *  
  * http://docs.jquery.com/UI/Slider  
  *  
  * Depends:  
  *  jquery.ui.core.js  
  *  jquery.ui.mouse.js  
  *  jquery.ui.widget.js  
  */  
 (function( $, undefined ) {  
 // number of pages in a slider  
 // (how many times can you page up/down to go through the whole range)  
 var numPages = 5;  
 $.widget( "ui.slider", $.ui.mouse, {  
   widgetEventPrefix: "slide",  
   options: {  
     animate: false,  
     distance: 0,  
     max: 100,  
     min: 0,  
     orientation: "horizontal",  
     range: false,  
     step: 1,  
     value: 0,  
     values: null  
   },  
   _create: function() {  
     var self = this,  
       o = this.options,  
       existingHandles = this.element.find( ".ui-slider-handle" ).addClass( "ui-state-default ui-corner-all" ),  
       handle = "<a class='ui-slider-handle ui-state-default ui-corner-all' href='#'></a>",  
       handleCount = ( o.values && o.values.length ) || 1,  
       handles = [];  
     this._keySliding = false;  
     this._mouseSliding = false;  
     this._animateOff = true;  
     this._handleIndex = null;  
     this._detectOrientation();  
     this._mouseInit();  
     this.element  
       .addClass( "ui-slider" +  
         " ui-slider-" + this.orientation +  
         " ui-widget" +  
         " ui-widget-content" +  
         " ui-corner-all" +  
         ( o.disabled ? " ui-slider-disabled ui-disabled" : "" ) );  
     this.range = $([]);  
     if ( o.range ) {  
       if ( o.range === true ) {  
         if ( !o.values ) {  
           o.values = [ this._valueMin(), this._valueMin() ];  
         }  
         /*edit  
         if ( o.values.length && o.values.length !== 2 ) {  
           o.values = [ o.values[0], o.values[0] ];  
         }*/  
       }  
       /*edit  
       this.range = $( "<div></div>" )  
         .appendTo( this.element )  
         .addClass( "ui-slider-range" +  
         // note: this isn't the most fittingly semantic framework class for this element,  
         // but worked best visually with a variety of themes  
         " ui-widget-header" +  
         ( ( o.range === "min" || o.range === "max" ) ? " ui-slider-range-" + o.range : "" ) );*/  
     }  
     for ( var i = existingHandles.length; i < handleCount; i += 1 ) {  
       handles.push( handle );  
     }  
     this.handles = existingHandles.add( $( handles.join( "" ) ).appendTo( self.element ) );  
     this.handle = this.handles.eq( 0 );  
     this.handles.add( this.range ).filter( "a" )  
       .click(function( event ) {  
         event.preventDefault();  
       })  
       .hover(function() {  
         if ( !o.disabled ) {  
           $( this ).addClass( "ui-state-hover" );  
         }  
       }, function() {  
         $( this ).removeClass( "ui-state-hover" );  
       })  
       .focus(function() {  
         if ( !o.disabled ) {  
           $( ".ui-slider .ui-state-focus" ).removeClass( "ui-state-focus" );  
           $( this ).addClass( "ui-state-focus" );  
         } else {  
           $( this ).blur();  
         }  
       })  
       .blur(function() {  
         $( this ).removeClass( "ui-state-focus" );  
       });  
     this.handles.each(function( i ) {  
       $( this ).data( "index.ui-slider-handle", i );  
     });  
     this.handles  
       .keydown(function( event ) {  
         var ret = true,  
           index = $( this ).data( "index.ui-slider-handle" ),  
           allowed,  
           curVal,  
           newVal,  
           step;  
         if ( self.options.disabled ) {  
           return;  
         }  
         switch ( event.keyCode ) {  
           case $.ui.keyCode.HOME:  
           case $.ui.keyCode.END:  
           case $.ui.keyCode.PAGE_UP:  
           case $.ui.keyCode.PAGE_DOWN:  
           case $.ui.keyCode.UP:  
           case $.ui.keyCode.RIGHT:  
           case $.ui.keyCode.DOWN:  
           case $.ui.keyCode.LEFT:  
             ret = false;  
             if ( !self._keySliding ) {  
               self._keySliding = true;  
               $( this ).addClass( "ui-state-active" );  
               allowed = self._start( event, index );  
               if ( allowed === false ) {  
                 return;  
               }  
             }  
             break;  
         }  
         step = self.options.step;  
         if ( self.options.values && self.options.values.length ) {  
           curVal = newVal = self.values( index );  
         } else {  
           curVal = newVal = self.value();  
         }  
         switch ( event.keyCode ) {  
           case $.ui.keyCode.HOME:  
             newVal = self._valueMin();  
             break;  
           case $.ui.keyCode.END:  
             newVal = self._valueMax();  
             break;  
           case $.ui.keyCode.PAGE_UP:  
             newVal = self._trimAlignValue( curVal + ( (self._valueMax() - self._valueMin()) / numPages ) );  
             break;  
           case $.ui.keyCode.PAGE_DOWN:  
             newVal = self._trimAlignValue( curVal - ( (self._valueMax() - self._valueMin()) / numPages ) );  
             break;  
           case $.ui.keyCode.UP:  
           case $.ui.keyCode.RIGHT:  
             if ( curVal === self._valueMax() ) {  
               return;  
             }  
             newVal = self._trimAlignValue( curVal + step );  
             break;  
           case $.ui.keyCode.DOWN:  
           case $.ui.keyCode.LEFT:  
             if ( curVal === self._valueMin() ) {  
               return;  
             }  
             newVal = self._trimAlignValue( curVal - step );  
             break;  
         }  
         self._slide( event, index, newVal );  
         return ret;  
       })  
       .keyup(function( event ) {  
         var index = $( this ).data( "index.ui-slider-handle" );  
         if ( self._keySliding ) {  
           self._keySliding = false;  
           self._stop( event, index );  
           self._change( event, index );  
           $( this ).removeClass( "ui-state-active" );  
         }  
       });  
     this._refreshValue();  
     this._animateOff = false;  
   },  
   destroy: function() {  
     this.handles.remove();  
     this.range.remove();  
     this.element  
       .removeClass( "ui-slider" +  
         " ui-slider-horizontal" +  
         " ui-slider-vertical" +  
         " ui-slider-disabled" +  
         " ui-widget" +  
         " ui-widget-content" +  
         " ui-corner-all" )  
       .removeData( "slider" )  
       .unbind( ".slider" );  
     this._mouseDestroy();  
     return this;  
   },  
   _mouseCapture: function( event ) {  
     var o = this.options,  
       position,  
       normValue,  
       distance,  
       closestHandle,  
       self,  
       index,  
       allowed,  
       offset,  
       mouseOverHandle;  
     if ( o.disabled ) {  
       return false;  
     }  
     this.elementSize = {  
       width: this.element.outerWidth(),  
       height: this.element.outerHeight()  
     };  
     this.elementOffset = this.element.offset();  
     position = { x: event.pageX, y: event.pageY };  
     normValue = this._normValueFromMouse( position );  
     distance = this._valueMax() - this._valueMin() + 1;  
     self = this;  
     this.handles.each(function( i ) {  
       var thisDistance = Math.abs( normValue - self.values(i) );  
       if ( distance > thisDistance ) {  
         distance = thisDistance;  
         closestHandle = $( this );  
         index = i;  
       }  
     });  
     // workaround for bug #3736 (if both handles of a range are at 0,  
     // the first is always used as the one with least distance,  
     // and moving it is obviously prevented by preventing negative ranges)  
     if( o.range === true && this.values(1) === o.min ) {  
       index += 1;  
       closestHandle = $( this.handles[index] );  
     }  
     allowed = this._start( event, index );  
     if ( allowed === false ) {  
       return false;  
     }  
     this._mouseSliding = true;  
     self._handleIndex = index;  
     closestHandle  
       .addClass( "ui-state-active" )  
       .focus();  
     offset = closestHandle.offset();  
     mouseOverHandle = !$( event.target ).parents().andSelf().is( ".ui-slider-handle" );  
     this._clickOffset = mouseOverHandle ? { left: 0, top: 0 } : {  
       left: event.pageX - offset.left - ( closestHandle.width() / 2 ),  
       top: event.pageY - offset.top -  
         ( closestHandle.height() / 2 ) -  
         ( parseInt( closestHandle.css("borderTopWidth"), 10 ) || 0 ) -  
         ( parseInt( closestHandle.css("borderBottomWidth"), 10 ) || 0) +  
         ( parseInt( closestHandle.css("marginTop"), 10 ) || 0)  
     };  
     if ( !this.handles.hasClass( "ui-state-hover" ) ) {  
       this._slide( event, index, normValue );  
     }  
     this._animateOff = true;  
     return true;  
   },  
   _mouseStart: function( event ) {  
     return true;  
   },  
   _mouseDrag: function( event ) {  
     var position = { x: event.pageX, y: event.pageY },  
       normValue = this._normValueFromMouse( position );  
     this._slide( event, this._handleIndex, normValue );  
     return false;  
   },  
   _mouseStop: function( event ) {  
     this.handles.removeClass( "ui-state-active" );  
     this._mouseSliding = false;  
     this._stop( event, this._handleIndex );  
     this._change( event, this._handleIndex );  
     this._handleIndex = null;  
     this._clickOffset = null;  
     this._animateOff = false;  
     return false;  
   },  
   _detectOrientation: function() {  
     this.orientation = ( this.options.orientation === "vertical" ) ? "vertical" : "horizontal";  
   },  
   _normValueFromMouse: function( position ) {  
     var pixelTotal,  
       pixelMouse,  
       percentMouse,  
       valueTotal,  
       valueMouse;  
     if ( this.orientation === "horizontal" ) {  
       pixelTotal = this.elementSize.width;  
       pixelMouse = position.x - this.elementOffset.left - ( this._clickOffset ? this._clickOffset.left : 0 );  
     } else {  
       pixelTotal = this.elementSize.height;  
       pixelMouse = position.y - this.elementOffset.top - ( this._clickOffset ? this._clickOffset.top : 0 );  
     }  
     percentMouse = ( pixelMouse / pixelTotal );  
     if ( percentMouse > 1 ) {  
       percentMouse = 1;  
     }  
     if ( percentMouse < 0 ) {  
       percentMouse = 0;  
     }  
     if ( this.orientation === "vertical" ) {  
       percentMouse = 1 - percentMouse;  
     }  
     valueTotal = this._valueMax() - this._valueMin();  
     valueMouse = this._valueMin() + percentMouse * valueTotal;  
     return this._trimAlignValue( valueMouse );  
   },  
   _start: function( event, index ) {  
     var uiHash = {  
       handle: this.handles[ index ],  
       value: this.value()  
     };  
     if ( this.options.values && this.options.values.length ) {  
       uiHash.value = this.values( index );  
       uiHash.values = this.values();  
     }  
     return this._trigger( "start", event, uiHash );  
   },  
   _slide: function( event, index, newVal ) {  
     var otherVal,  
       newValues,  
       allowed;  
     if ( this.options.values && this.options.values.length ) {  
       otherVal = this.values( index ? 0 : 1 );  
       if ( ( this.options.values.length === 2 && this.options.range === true ) &&  
           ( ( index === 0 && newVal > otherVal) || ( index === 1 && newVal < otherVal ) )  
         ) {  
         newVal = otherVal;  
       }  
       if ( newVal !== this.values( index ) ) {  
         newValues = this.values();  
         newValues[ index ] = newVal;  
         // A slide can be canceled by returning false from the slide callback  
         allowed = this._trigger( "slide", event, {  
           handle: this.handles[ index ],  
           value: newVal,  
           values: newValues  
         } );  
         otherVal = this.values( index ? 0 : 1 );  
         if ( allowed !== false ) {  
           this.values( index, newVal, true );  
         }  
       }  
     } else {  
       if ( newVal !== this.value() ) {  
         // A slide can be canceled by returning false from the slide callback  
         allowed = this._trigger( "slide", event, {  
           handle: this.handles[ index ],  
           value: newVal  
         } );  
         if ( allowed !== false ) {  
           this.value( newVal );  
         }  
       }  
     }  
   },  
   _stop: function( event, index ) {  
     var uiHash = {  
       handle: this.handles[ index ],  
       value: this.value()  
     };  
     if ( this.options.values && this.options.values.length ) {  
       uiHash.value = this.values( index );  
       uiHash.values = this.values();  
     }  
     this._trigger( "stop", event, uiHash );  
   },  
   _change: function( event, index ) {  
     if ( !this._keySliding && !this._mouseSliding ) {  
       var uiHash = {  
         handle: this.handles[ index ],  
         value: this.value()  
       };  
       if ( this.options.values && this.options.values.length ) {  
         uiHash.value = this.values( index );  
         uiHash.values = this.values();  
       }  
       this._trigger( "change", event, uiHash );  
     }  
   },  
   value: function( newValue ) {  
     if ( arguments.length ) {  
       this.options.value = this._trimAlignValue( newValue );  
       this._refreshValue();  
       this._change( null, 0 );  
       return;  
     }  
     return this._value();  
   },  
   values: function( index, newValue ) {  
     var vals,  
       newValues,  
       i;  
     if ( arguments.length > 1 ) {  
       this.options.values[ index ] = this._trimAlignValue( newValue );  
       this._refreshValue();  
       this._change( null, index );  
       return;  
     }  
     if ( arguments.length ) {  
       if ( $.isArray( arguments[ 0 ] ) ) {  
         vals = this.options.values;  
         newValues = arguments[ 0 ];  
         for ( i = 0; i < vals.length; i += 1 ) {  
           vals[ i ] = this._trimAlignValue( newValues[ i ] );  
           this._change( null, i );  
         }  
         this._refreshValue();  
       } else {  
         if ( this.options.values && this.options.values.length ) {  
           return this._values( index );  
         } else {  
           return this.value();  
         }  
       }  
     } else {  
       return this._values();  
     }  
   },  
   _setOption: function( key, value ) {  
     var i,  
       valsLength = 0;  
     if ( $.isArray( this.options.values ) ) {  
       valsLength = this.options.values.length;  
     }  
     $.Widget.prototype._setOption.apply( this, arguments );  
     switch ( key ) {  
       case "disabled":  
         if ( value ) {  
           this.handles.filter( ".ui-state-focus" ).blur();  
           this.handles.removeClass( "ui-state-hover" );  
           this.handles.propAttr( "disabled", true );  
           this.element.addClass( "ui-disabled" );  
         } else {  
           this.handles.propAttr( "disabled", false );  
           this.element.removeClass( "ui-disabled" );  
         }  
         break;  
       case "orientation":  
         this._detectOrientation();  
         this.element  
           .removeClass( "ui-slider-horizontal ui-slider-vertical" )  
           .addClass( "ui-slider-" + this.orientation );  
         this._refreshValue();  
         break;  
       case "value":  
         this._animateOff = true;  
         this._refreshValue();  
         this._change( null, 0 );  
         this._animateOff = false;  
         break;  
       case "values":  
         this._animateOff = true;  
         this._refreshValue();  
         for ( i = 0; i < valsLength; i += 1 ) {  
           this._change( null, i );  
         }  
         this._animateOff = false;  
         break;  
     }  
   },  
   //internal value getter  
   // _value() returns value trimmed by min and max, aligned by step  
   _value: function() {  
     var val = this.options.value;  
     val = this._trimAlignValue( val );  
     return val;  
   },  
   //internal values getter  
   // _values() returns array of values trimmed by min and max, aligned by step  
   // _values( index ) returns single value trimmed by min and max, aligned by step  
   _values: function( index ) {  
     var val,  
       vals,  
       i;  
     if ( arguments.length ) {  
       val = this.options.values[ index ];  
       val = this._trimAlignValue( val );  
       return val;  
     } else {  
       // .slice() creates a copy of the array  
       // this copy gets trimmed by min and max and then returned  
       vals = this.options.values.slice();  
       for ( i = 0; i < vals.length; i+= 1) {  
         vals[ i ] = this._trimAlignValue( vals[ i ] );  
       }  
       return vals;  
     }  
   },  
   // returns the step-aligned value that val is closest to, between (inclusive) min and max  
   _trimAlignValue: function( val ) {  
     if ( val <= this._valueMin() ) {  
       return this._valueMin();  
     }  
     if ( val >= this._valueMax() ) {  
       return this._valueMax();  
     }  
     var step = ( this.options.step > 0 ) ? this.options.step : 1,  
       valModStep = (val - this._valueMin()) % step,  
       alignValue = val - valModStep;  
     if ( Math.abs(valModStep) * 2 >= step ) {  
       alignValue += ( valModStep > 0 ) ? step : ( -step );  
     }  
     // Since JavaScript has problems with large floats, round  
     // the final value to 5 digits after the decimal point (see #4124)  
     return parseFloat( alignValue.toFixed(5) );  
   },  
   _valueMin: function() {  
     return this.options.min;  
   },  
   _valueMax: function() {  
     return this.options.max;  
   },  
   _refreshValue: function() {  
     var oRange = this.options.range,  
       o = this.options,  
       self = this,  
       animate = ( !this._animateOff ) ? o.animate : false,  
       valPercent,  
       _set = {},  
       lastValPercent,  
       value,  
       valueMin,  
       valueMax;  
     if ( this.options.values && this.options.values.length ) {  
       this.handles.each(function( i, j ) {  
         valPercent = ( self.values(i) - self._valueMin() ) / ( self._valueMax() - self._valueMin() ) * 100;  
         _set[ self.orientation === "horizontal" ? "left" : "bottom" ] = valPercent + "%";  
         $( this ).stop( 1, 1 )[ animate ? "animate" : "css" ]( _set, o.animate );  
         if ( self.options.range === true ) {  
           if ( self.orientation === "horizontal" ) {  
             if ( i === 0 ) {  
               self.range.stop( 1, 1 )[ animate ? "animate" : "css" ]( { left: valPercent + "%" }, o.animate );  
             }  
             if ( i === 1 ) {  
               self.range[ animate ? "animate" : "css" ]( { width: ( valPercent - lastValPercent ) + "%" }, { queue: false, duration: o.animate } );  
             }  
           } else {  
             if ( i === 0 ) {  
               self.range.stop( 1, 1 )[ animate ? "animate" : "css" ]( { bottom: ( valPercent ) + "%" }, o.animate );  
             }  
             if ( i === 1 ) {  
               self.range[ animate ? "animate" : "css" ]( { height: ( valPercent - lastValPercent ) + "%" }, { queue: false, duration: o.animate } );  
             }  
           }  
         }  
         lastValPercent = valPercent;  
       });  
     } else {  
       value = this.value();  
       valueMin = this._valueMin();  
       valueMax = this._valueMax();  
       valPercent = ( valueMax !== valueMin ) ?  
           ( value - valueMin ) / ( valueMax - valueMin ) * 100 :  
           0;  
       _set[ self.orientation === "horizontal" ? "left" : "bottom" ] = valPercent + "%";  
       this.handle.stop( 1, 1 )[ animate ? "animate" : "css" ]( _set, o.animate );  
       if ( oRange === "min" && this.orientation === "horizontal" ) {  
         this.range.stop( 1, 1 )[ animate ? "animate" : "css" ]( { width: valPercent + "%" }, o.animate );  
       }  
       if ( oRange === "max" && this.orientation === "horizontal" ) {  
         this.range[ animate ? "animate" : "css" ]( { width: ( 100 - valPercent ) + "%" }, { queue: false, duration: o.animate } );  
       }  
       if ( oRange === "min" && this.orientation === "vertical" ) {  
         this.range.stop( 1, 1 )[ animate ? "animate" : "css" ]( { height: valPercent + "%" }, o.animate );  
       }  
       if ( oRange === "max" && this.orientation === "vertical" ) {  
         this.range[ animate ? "animate" : "css" ]( { height: ( 100 - valPercent ) + "%" }, { queue: false, duration: o.animate } );  
       }  
     }  
   }  
 });  
 $.extend( $.ui.slider, {  
   version: "1.8.16"  
 });  
 }(jQuery));  
     $(function() {  
     $( "#slider-range" ).slider({  
       range: true,  
       min: 0,  
       max: 1000,  
       values: [ 100, 300, 600, 900],  
       slide: function( event, ui ) {  
         $( "#amount" ).val( "" + ui.values[ 0 ]  
                   + " - "  
                   + ui.values[ 1 ]  
                   + " - "  
                   + ui.values[ 2 ]  
                   + " - "  
                   + ui.values[ 3 ] );  
       }  
     });  
         $( "#amount" ).val( "" + $( "#slider-range" ).slider( "values", 0 )  
                   + " - "  
                   + $( "#slider-range" ).slider( "values", 1 )  
                   + " - "  
                   + $( "#slider-range" ).slider( "values", 2 )  
                   + " - "  
                   + $( "#slider-range" ).slider( "values", 3 ) );  
   });  
 </script>  
 </head>  
 <body>  
 <div class="demo">  
  <input type="text" id="amount" style="border:0; color:#f6931f; font-weight:bold;" />  
  <div id="slider-range"></div>   
 </div>  
 </body>  
 </html>

Part 2
  min: 0,  
       max: 2000,  
       values: [ 200, 600, 1200, 1800],  
       slide: function( event, ui ) {  
         $( "#amount" ).val( "" + ui.values[ 0 ]*0.5  
                   + " - "  
                   + ui.values[ 1 ]*0.5   
                   + " - "  
                   + ui.values[ 2 ]*0.5   
                   + " - "  
                   + ui.values[ 3 ]*0.5 );  
       }  
     });  
         $( "#amount" ).val( "" + $( "#slider-range" ).slider( "values", 0 )*0.5  
                   + " - "  
                   + $( "#slider-range" ).slider( "values", 1 )*0.5  
                   + " - "  
                   + $( "#slider-range" ).slider( "values", 2 )*0.5  
                   + " - "  
                   + $( "#slider-range" ).slider( "values", 3 )*0.5 );

JavaScript , jQuery
Tagged as :

0 comments :

Post a Comment

Subscribe to: Post Comments ( Atom )
 

© 2011 GIS and Remote Sensing Tools, Tips and more .. ToS | Privacy Policy | Sitemap

About Me