JQDateRangeSlider - single point with zoom functionality
HTML
<link rel="stylesheet" href="http://ghusse.github.io/jQRangeSlider/stable/css/iThing.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.3.0/css/font-awesome.min.css">
<div class="singleSlider">
<div id="singleRangeSlider"></div>
</div>
<div id="sliderControls">
<div class="controlContainer"><i id="zoomInSlider" class="fa fa-search-plus"></i></div>
<div class="controlContainer"><i id="zoomOutSlider" class="fa fa-search-minus" disabled="disabled"></i></div>
</div>
CSS
html,
body {
font-family: @font-family;
background-color:#000;
overflow:hidden;
height:100%;
font-size: 11px;
}
i {
cursor: pointer;
font-size:20px !important;
}
.singleSlider {
position:fixed;
bottom:10px;
width:98%;
}
#singleRangeSlider {
position:fixed;
bottom:0;
left:0;
}
/** - - - singleSlider CSS - - - **/
/** Hide the left label **/
.singleSlider .ui-rangeSlider-leftLabel{
background: rgba(0,0,0,0);
opacity: 0;
cursor: default;
}
/** Hide the left handle **/
.singleSlider .ui-rangeSlider-leftLabel .ui-rangeSlider-label {
color: rgba(0,0,0,0);
cursor: default;
}
/** Reset the cursor for the left handle **/
.singleSlider .ui-rangeSlider-leftHandle {
cursor: default;
}
/** Hide the bar **/
.singleSlider .ui-rangeSlider-bar{
background: rgba(0,0,0,0);
webkit-box-shadow: none;
-moz-box-shadow: none;
box-shadow: none;
cursor: default;
}
/** Add a pseudoelement to create a minibar at the right handle. **/
.singleSlider .ui-rangeSlider-bar:after {
right: 0;
width: 2px;
top: 0;
bottom: 0;
background:#93BE43;
display: block;
content: '';
position: absolute;
}
#sliderControls {
position:fixed;
top:10px;
left:0;
color:#fff;
width:80px;
height:60px;
}
#sliderControls .controlContainer{
width:40px;
height:30px;
text-align:center;
float:left;
vertical-align:middle;
}
.fa-long-arrow-down {
color: #93BE43;
cursor:default;
}
.fa-arrows-h {
color: #666;
cursor:default;
}
JavaScript
var zoomCount = 6;
var singleRangeSlider = $('#singleRangeSlider');
var clientWidth = $(window).width();
/*! jQRangeSlider 5.7.1 - 2015-01-23 - Copyright (C) Guillaume Gautreau 2012 - MIT and GPLv3 licenses.*/
!function (a) {
"use strict";
a.widget("ui.rangeSliderMouseTouch", a.ui.mouse, {
enabled : !0,
_mouseInit : function () {
var b = this;
a.ui.mouse.prototype._mouseInit.apply(this),
this._mouseDownEvent = !1,
this.element.bind("touchstart." + this.widgetName, function (a) {
return b._touchStart(a)
})
},
_mouseDestroy : function () {
a(document).unbind("touchmove." + this.widgetName, this._touchMoveDelegate).unbind("touchend." + this.widgetName, this._touchEndDelegate),
a.ui.mouse.prototype._mouseDestroy.apply(this)
},
enable : function () {
this.enabled = !0
},
disable : function () {
this.enabled = !1
},
destroy : function () {
this._mouseDestroy(),
a.ui.mouse.prototype.destroy.apply(this),
this._mouseInit = null
},
_touchStart : function (b) {
if (!this.enabled)
return !1;
b.which = 1,
b.preventDefault(),
this._fillTouchEvent(b);
var c = this,
d = this._mouseDownEvent;
this._mouseDown(b),
d !== this._mouseDownEvent && (this._touchEndDelegate = function (a) {
c._touchEnd(a)
}, this._touchMoveDelegate = function (a) {
c._touchMove(a)
}, a(document).bind("touchmove." + this.widgetName, this._touchMoveDelegate).bind("touchend." + this.widgetName, this._touchEndDelegate))
},
_mouseDown : function (b) {
return this.enabled ? a.ui.mouse.prototype._mouseDown.apply(this, [b]) : !1
},
_touchEnd : function (b) {
this._fillTouchEvent(b),
this._mouseUp(b),
a(document).unbind("touchmove." + this.widgetName, this._touchMoveDelegate).unbind("touchend." + this.widgetName, this._touchEndDelegate),
this._mouseDownEvent = !1,
a(document).trigger("mouseup")
},
_touchMove : function (a) {
return...