Skip to content
Projects
Groups
Snippets
Help
Loading...
Sign in
Toggle navigation
I
i20rzslider
Project
Project
Details
Activity
Cycle Analytics
Repository
Repository
Files
Commits
Branches
Tags
Contributors
Graph
Compare
Charts
Issues
0
Issues
0
List
Board
Labels
Milestones
Merge Requests
0
Merge Requests
0
CI / CD
CI / CD
Pipelines
Jobs
Schedules
Charts
Registry
Registry
Wiki
Wiki
Snippets
Snippets
Members
Members
Collapse sidebar
Close sidebar
Activity
Graph
Charts
Create a new issue
Jobs
Commits
Issue Boards
Open sidebar
jedife
i20rzslider
Commits
dac4cee2
Commit
dac4cee2
authored
May 09, 2014
by
Jussi Saarivirta
Browse files
Options
Browse Files
Download
Email Patches
Plain Diff
Added 'slideEnded' event (emitted when dragging ends).
parent
ab0057a6
Hide whitespace changes
Inline
Side-by-side
Showing
3 changed files
with
6 additions
and
4 deletions
+6
-4
rzslider.min.css
dist/rzslider.min.css
+1
-1
rzslider.min.js
dist/rzslider.min.js
+2
-2
rzslider.js
rzslider.js
+3
-1
No files found.
dist/rzslider.min.css
View file @
dac4cee2
/*! jusas-angularjs-slider - v0.1.4 - (c) Rafal Zajac <rzajac@gmail.com>, Jussi Saarivirta <jusasi@gmail.com>, https://github.com/Jusas/angularjs-slider.git - 2014-0
4-2
9 */
/*! jusas-angularjs-slider - v0.1.4 - (c) Rafal Zajac <rzajac@gmail.com>, Jussi Saarivirta <jusasi@gmail.com>, https://github.com/Jusas/angularjs-slider.git - 2014-0
5-0
9 */
rzslider
{
position
:
relative
;
display
:
inline-block
;
width
:
100%
;
height
:
2px
;
margin
:
30px
0
15px
0
;
vertical-align
:
middle
}
rzslider
span
{
position
:
absolute
;
display
:
inline-block
;
white-space
:
nowrap
}
rzslider
span
.base
{
width
:
100%
;
height
:
100%
;
padding
:
0
}
rzslider
span
.bar
{
z-index
:
0
;
width
:
100%
;
height
:
100%
;
background
:
#fff
}
rzslider
span
.bar.selection
{
z-index
:
1
;
width
:
0
;
background
:
#67b700
}
rzslider
span
.pointer
{
top
:
-15px
;
z-index
:
2
;
width
:
32px
;
height
:
32px
;
cursor
:
pointer
;
background-color
:
#fff
;
-webkit-border-radius
:
16px
;
-moz-border-radius
:
16px
;
border-radius
:
16px
}
rzslider
span
.pointer
:after
{
position
:
absolute
;
top
:
12px
;
left
:
12px
;
width
:
8px
;
height
:
8px
;
background
:
#71818e
;
-webkit-border-radius
:
4px
;
-moz-border-radius
:
4px
;
border-radius
:
4px
;
content
:
''
}
rzslider
span
.pointer
:hover:after
{
background-color
:
#67b700
}
rzslider
span
.pointer.active
:after
{
background-color
:
#67b700
}
rzslider
span
.bubble
{
top
:
-32px
;
padding
:
1px
3px
1px
3px
;
color
:
#67b700
;
cursor
:
default
}
rzslider
span
.bubble.selection
{
top
:
15px
}
rzslider
span
.bubble.limit
{
color
:
#67b700
}
\ No newline at end of file
dist/rzslider.min.js
View file @
dac4cee2
/*! jusas-angularjs-slider - v0.1.4 - (c) Rafal Zajac <rzajac@gmail.com>, Jussi Saarivirta <jusasi@gmail.com>, https://github.com/Jusas/angularjs-slider.git - 2014-04-29 */
angular
.
module
(
"rzModule"
,[]).
value
(
"throttle"
,
function
(
a
,
b
,
c
){
var
d
,
e
,
f
,
g
=
Date
.
now
||
function
(){
return
(
new
Date
).
getTime
()},
h
=
null
,
i
=
0
;
c
||
(
c
=
{});
var
j
=
function
(){
i
=
c
.
leading
===!
1
?
0
:
g
(),
h
=
null
,
f
=
a
.
apply
(
d
,
e
),
d
=
e
=
null
};
return
function
(){
var
k
=
g
();
i
||
c
.
leading
!==!
1
||
(
i
=
k
);
var
l
=
b
-
(
k
-
i
);
return
d
=
this
,
e
=
arguments
,
0
>=
l
?(
clearTimeout
(
h
),
h
=
null
,
i
=
k
,
f
=
a
.
apply
(
d
,
e
),
d
=
e
=
null
):
h
||
c
.
trailing
===!
1
||
(
h
=
setTimeout
(
j
,
l
)),
f
}}).
factory
(
"Slider"
,[
"$timeout"
,
"$document"
,
"throttle"
,
function
(
a
,
b
,
c
){
var
d
=
function
(
a
,
b
,
c
){
this
.
scope
=
a
,
this
.
attributes
=
c
,
this
.
sliderElem
=
b
,
this
.
range
=
void
0
!==
c
.
rzSliderHigh
&&
void
0
!==
c
.
rzSliderModel
,
this
.
handleHalfWidth
=
0
,
this
.
maxLeft
=
0
,
this
.
precision
=
0
,
this
.
step
=
0
,
this
.
tracking
=
""
,
this
.
minValue
=
0
,
this
.
maxValue
=
0
,
this
.
valueRange
=
0
,
this
.
initRun
=!
1
,
this
.
customTrFn
=
null
,
this
.
fullBar
=
null
,
this
.
selBar
=
null
,
this
.
minH
=
null
,
this
.
maxH
=
null
,
this
.
flrLab
=
null
,
this
.
ceilLab
=
null
,
this
.
minLab
=
null
,
this
.
maxLab
=
null
,
this
.
cmbLab
=
null
,
this
.
init
()};
return
d
.
prototype
=
{
init
:
function
(){
var
b
=
this
;
this
.
scope
.
rzSliderTranslate
&&
(
this
.
customTrFn
=
this
.
scope
.
rzSliderTranslate
()),
this
.
initElemHandles
(),
this
.
calcViewDimensions
(),
this
.
setMinAndMax
(),
this
.
precision
=
void
0
===
this
.
scope
.
rzSliderPrecision
?
0
:
+
this
.
scope
.
rzSliderPrecision
,
this
.
step
=
void
0
===
this
.
scope
.
rzSliderStep
?
1
:
+
this
.
scope
.
rzSliderStep
,
a
(
function
(){
b
.
updateCeilLab
(),
b
.
updateFloorLab
(),
b
.
initHandles
(),
b
.
bindEvents
()}),
this
.
scope
.
$on
(
"reCalcViewDimensions"
,
angular
.
bind
(
this
,
this
.
calcViewDimensions
)),
angular
.
element
(
window
).
on
(
"resize"
,
angular
.
bind
(
this
,
this
.
calcViewDimensions
)),
this
.
initRun
=!
0
;
var
d
=
c
(
function
(){
b
.
setMinAndMax
(),
b
.
updateLowHandle
(
b
.
valueToOffset
(
b
.
scope
.
rzSliderModel
)),
b
.
range
&&
(
b
.
updateSelectionBar
(),
b
.
updateCmbLabel
())},
350
,{
leading
:
!
1
}),
e
=
c
(
function
(){
b
.
setMinAndMax
(),
b
.
updateHighHandle
(
b
.
valueToOffset
(
b
.
scope
.
rzSliderHigh
)),
b
.
updateSelectionBar
(),
b
.
updateCmbLabel
()},
350
,{
leading
:
!
1
});
this
.
scope
.
$on
(
"rzSliderForceRender"
,
function
(){
b
.
resetLabelsValue
(),
d
(),
e
(),
b
.
resetSlider
()}),
this
.
scope
.
$watch
(
"rzSliderModel"
,
function
(
a
,
b
){
a
!==
b
&&
d
()}),
this
.
scope
.
$watch
(
"rzSliderHigh"
,
function
(
a
,
b
){
a
!==
b
&&
e
()}),
this
.
scope
.
$watch
(
"rzSliderFloor"
,
function
(
a
,
c
){
a
!==
c
&&
b
.
resetSlider
()}),
this
.
scope
.
$watch
(
"rzSliderCeil"
,
function
(
a
,
c
){
a
!==
c
&&
b
.
resetSlider
()})},
resetSlider
:
function
(){
this
.
setMinAndMax
(),
this
.
calcViewDimensions
(),
this
.
updateCeilLab
(),
this
.
updateFloorLab
()},
resetLabelsValue
:
function
(){
this
.
minLab
.
rzsv
=
void
0
,
this
.
maxLab
.
rzsv
=
void
0
},
initHandles
:
function
(){
this
.
updateLowHandle
(
this
.
valueToOffset
(
this
.
scope
.
rzSliderModel
)),
this
.
range
&&
(
this
.
updateHighHandle
(
this
.
valueToOffset
(
this
.
scope
.
rzSliderHigh
)),
this
.
updateSelectionBar
(),
this
.
updateCmbLabel
())},
translateFn
:
function
(
a
,
b
,
c
){
c
=
void
0
===
c
?
!
0
:
c
;
var
d
=
this
.
customTrFn
&&
c
?
""
+
this
.
customTrFn
(
a
):
""
+
a
,
e
=!
1
;(
void
0
===
b
.
rzsv
||
b
.
rzsv
.
length
!=
d
.
length
)
&&
(
e
=!
0
,
b
.
rzsv
=
d
),
b
.
text
(
d
),
e
&&
this
.
getWidth
(
b
)},
setMinAndMax
:
function
(){
this
.
minValue
=
this
.
scope
.
rzSliderFloor
?
+
this
.
scope
.
rzSliderFloor
:
this
.
scope
.
rzSliderFloor
=
0
,
this
.
scope
.
rzSliderCeil
?
this
.
maxValue
=+
this
.
scope
.
rzSliderCeil
:
this
.
scope
.
rzSliderCeil
=
this
.
maxValue
=
this
.
range
?
this
.
scope
.
rzSliderHigh
:
this
.
scope
.
rzSliderModel
,
this
.
valueRange
=
this
.
maxValue
-
this
.
minValue
},
initElemHandles
:
function
(){
angular
.
forEach
(
this
.
sliderElem
.
children
(),
function
(
a
,
b
){
var
c
=
angular
.
element
(
a
);
switch
(
b
){
case
0
:
this
.
fullBar
=
c
;
break
;
case
1
:
this
.
selBar
=
c
;
break
;
case
2
:
this
.
minH
=
c
;
break
;
case
3
:
this
.
maxH
=
c
;
break
;
case
4
:
this
.
flrLab
=
c
;
break
;
case
5
:
this
.
ceilLab
=
c
;
break
;
case
6
:
this
.
minLab
=
c
;
break
;
case
7
:
this
.
maxLab
=
c
;
break
;
case
8
:
this
.
cmbLab
=
c
}},
this
),
this
.
fullBar
.
rzsl
=
0
,
this
.
selBar
.
rzsl
=
0
,
this
.
minH
.
rzsl
=
0
,
this
.
maxH
.
rzsl
=
0
,
this
.
flrLab
.
rzsl
=
0
,
this
.
ceilLab
.
rzsl
=
0
,
this
.
minLab
.
rzsl
=
0
,
this
.
maxLab
.
rzsl
=
0
,
this
.
cmbLab
.
rzsl
=
0
,
this
.
range
||
(
this
.
cmbLab
.
remove
(),
this
.
maxLab
.
remove
(),
this
.
maxH
.
remove
(),
this
.
selBar
.
remove
())},
calcViewDimensions
:
function
(){
var
a
=
this
.
getWidth
(
this
.
minH
);
this
.
handleHalfWidth
=
a
/
2
,
this
.
barWidth
=
this
.
getWidth
(
this
.
fullBar
),
this
.
maxLeft
=
this
.
barWidth
-
a
,
this
.
getWidth
(
this
.
sliderElem
),
this
.
sliderElem
.
rzsl
=
this
.
sliderElem
[
0
].
getBoundingClientRect
().
left
,
this
.
initRun
&&
(
this
.
updateCeilLab
(),
this
.
initHandles
())},
updateCeilLab
:
function
(){
this
.
translateFn
(
this
.
scope
.
rzSliderCeil
,
this
.
ceilLab
),
this
.
setLeft
(
this
.
ceilLab
,
this
.
barWidth
-
this
.
ceilLab
.
rzsw
),
this
.
getWidth
(
this
.
ceilLab
)},
updateFloorLab
:
function
(){
this
.
translateFn
(
this
.
scope
.
rzSliderFloor
,
this
.
flrLab
),
this
.
getWidth
(
this
.
flrLab
)},
updateHandles
:
function
(
a
,
b
){
return
"rzSliderModel"
===
a
?(
this
.
updateLowHandle
(
b
),
void
(
this
.
range
&&
(
this
.
updateSelectionBar
(),
this
.
updateCmbLabel
()))):
"rzSliderHigh"
===
a
?(
this
.
updateHighHandle
(
b
),
void
(
this
.
range
&&
(
this
.
updateSelectionBar
(),
this
.
updateCmbLabel
()))):(
this
.
updateLowHandle
(
b
),
this
.
updateHighHandle
(
b
),
this
.
updateSelectionBar
(),
void
this
.
updateCmbLabel
())},
updateLowHandle
:
function
(
a
){
this
.
setLeft
(
this
.
minH
,
a
),
this
.
translateFn
(
this
.
scope
.
rzSliderModel
,
this
.
minLab
),
this
.
setLeft
(
this
.
minLab
,
a
-
this
.
minLab
.
rzsw
/
2
+
this
.
handleHalfWidth
),
this
.
shFloorCeil
()},
updateHighHandle
:
function
(
a
){
this
.
setLeft
(
this
.
maxH
,
a
),
this
.
translateFn
(
this
.
scope
.
rzSliderHigh
,
this
.
maxLab
),
this
.
setLeft
(
this
.
maxLab
,
a
-
this
.
maxLab
.
rzsw
/
2
+
this
.
handleHalfWidth
),
this
.
shFloorCeil
()},
shFloorCeil
:
function
(){
var
a
=!
1
,
b
=!
1
;
this
.
minLab
.
rzsl
<=
this
.
flrLab
.
rzsl
+
this
.
flrLab
.
rzsw
+
5
?(
a
=!
0
,
this
.
hideEl
(
this
.
flrLab
)):(
a
=!
1
,
this
.
showEl
(
this
.
flrLab
)),
this
.
minLab
.
rzsl
+
this
.
minLab
.
rzsw
>=
this
.
ceilLab
.
rzsl
-
this
.
handleHalfWidth
-
10
?(
b
=!
0
,
this
.
hideEl
(
this
.
ceilLab
)):(
b
=!
1
,
this
.
showEl
(
this
.
ceilLab
)),
this
.
range
&&
(
this
.
maxLab
.
rzsl
+
this
.
maxLab
.
rzsw
>=
this
.
ceilLab
.
rzsl
-
10
?
this
.
hideEl
(
this
.
ceilLab
):
b
||
this
.
showEl
(
this
.
ceilLab
),
this
.
maxLab
.
rzsl
<=
this
.
flrLab
.
rzsl
+
this
.
flrLab
.
rzsw
+
this
.
handleHalfWidth
?
this
.
hideEl
(
this
.
flrLab
):
a
||
this
.
showEl
(
this
.
flrLab
))},
updateSelectionBar
:
function
(){
this
.
setWidth
(
this
.
selBar
,
this
.
maxH
.
rzsl
-
this
.
minH
.
rzsl
),
this
.
setLeft
(
this
.
selBar
,
this
.
minH
.
rzsl
+
this
.
handleHalfWidth
)},
updateCmbLabel
:
function
(){
var
a
,
b
;
this
.
minLab
.
rzsl
+
this
.
minLab
.
rzsw
+
10
>=
this
.
maxLab
.
rzsl
?(
this
.
customTrFn
?(
a
=
this
.
customTrFn
(
this
.
scope
.
rzSliderModel
),
b
=
this
.
customTrFn
(
this
.
scope
.
rzSliderHigh
)):(
a
=
this
.
scope
.
rzSliderModel
,
b
=
this
.
scope
.
rzSliderHigh
),
this
.
translateFn
(
a
+
" - "
+
b
,
this
.
cmbLab
,
!
1
),
this
.
setLeft
(
this
.
cmbLab
,
this
.
selBar
.
rzsl
+
this
.
selBar
.
rzsw
/
2
-
this
.
cmbLab
.
rzsw
/
2
),
this
.
hideEl
(
this
.
minLab
),
this
.
hideEl
(
this
.
maxLab
),
this
.
showEl
(
this
.
cmbLab
)):(
this
.
showEl
(
this
.
maxLab
),
this
.
showEl
(
this
.
minLab
),
this
.
hideEl
(
this
.
cmbLab
))},
roundStep
:
function
(
a
){
var
b
=
this
.
step
,
c
=
(
a
-
this
.
minValue
)
%
b
,
d
=
c
>
b
/
2
?
a
+
b
-
c
:
a
-
c
;
return
+
d
.
toFixed
(
this
.
precision
)},
hideEl
:
function
(
a
){
return
a
.
css
({
opacity
:
0
})},
showEl
:
function
(
a
){
return
a
.
css
({
opacity
:
1
})},
setLeft
:
function
(
a
,
b
){
return
a
.
rzsl
=
b
,
a
.
css
({
left
:
b
+
"px"
}),
b
},
getWidth
:
function
(
a
){
var
b
=
a
[
0
].
getBoundingClientRect
();
return
a
.
rzsw
=
b
.
right
-
b
.
left
,
a
.
rzsw
},
setWidth
:
function
(
a
,
b
){
return
a
.
rzsw
=
b
,
a
.
css
({
width
:
b
+
"px"
}),
b
},
valueToOffset
:
function
(
a
){
return
(
a
-
this
.
minValue
)
*
this
.
maxLeft
/
this
.
valueRange
},
offsetToValue
:
function
(
a
){
return
a
/
this
.
maxLeft
*
this
.
valueRange
+
this
.
minValue
},
bindEvents
:
function
(){
this
.
minH
.
on
(
"mousedown"
,
angular
.
bind
(
this
,
this
.
onStart
,
this
.
minH
,
"rzSliderModel"
)),
this
.
range
&&
this
.
maxH
.
on
(
"mousedown"
,
angular
.
bind
(
this
,
this
.
onStart
,
this
.
maxH
,
"rzSliderHigh"
)),
this
.
minH
.
on
(
"touchstart"
,
angular
.
bind
(
this
,
this
.
onStart
,
this
.
minH
,
"rzSliderModel"
)),
this
.
range
&&
this
.
maxH
.
on
(
"touchstart"
,
angular
.
bind
(
this
,
this
.
onStart
,
this
.
maxH
,
"rzSliderHigh"
))},
onStart
:
function
(
a
,
c
,
d
){
d
.
stopPropagation
(),
d
.
preventDefault
(),
""
===
this
.
tracking
&&
(
this
.
calcViewDimensions
(),
this
.
tracking
=
c
,
a
.
addClass
(
"active"
),
d
.
touches
||
"undefined"
!=
typeof
d
.
originalEvent
&&
d
.
originalEvent
.
touches
?(
b
.
on
(
"touchmove"
,
angular
.
bind
(
this
,
this
.
onMove
,
a
)),
b
.
on
(
"touchend"
,
angular
.
bind
(
this
,
this
.
onEnd
))):(
b
.
on
(
"mousemove"
,
angular
.
bind
(
this
,
this
.
onMove
,
a
)),
b
.
on
(
"mouseup"
,
angular
.
bind
(
this
,
this
.
onEnd
))))},
onMove
:
function
(
a
,
b
){
var
c
,
d
=
b
.
clientX
||
(
"undefined"
!=
typeof
b
.
originalEvent
?
b
.
originalEvent
.
touches
[
0
].
clientX
:
b
.
touches
[
0
].
clientX
),
e
=
this
.
sliderElem
.
rzsl
,
f
=
d
-
e
-
this
.
handleHalfWidth
;
return
0
>=
f
?
void
(
0
!==
a
.
rzsl
&&
(
this
.
scope
[
this
.
tracking
]
=
this
.
minValue
,
this
.
updateHandles
(
this
.
tracking
,
0
),
this
.
scope
.
$apply
())):
f
>=
this
.
maxLeft
?
void
(
a
.
rzsl
!==
this
.
maxLeft
&&
(
this
.
scope
[
this
.
tracking
]
=
this
.
maxValue
,
this
.
updateHandles
(
this
.
tracking
,
this
.
maxLeft
),
this
.
scope
.
$apply
())):(
c
=
this
.
offsetToValue
(
f
),
c
=
this
.
roundStep
(
c
),
this
.
range
&&
(
"rzSliderModel"
===
this
.
tracking
&&
c
>=
this
.
scope
.
rzSliderHigh
?(
this
.
scope
[
this
.
tracking
]
=
this
.
scope
.
rzSliderHigh
,
this
.
updateHandles
(
this
.
tracking
,
this
.
maxH
.
rzsl
),
this
.
tracking
=
"rzSliderHigh"
,
this
.
minH
.
removeClass
(
"active"
),
this
.
maxH
.
addClass
(
"active"
)):
"rzSliderHigh"
===
this
.
tracking
&&
c
<=
this
.
scope
.
rzSliderModel
&&
(
this
.
scope
[
this
.
tracking
]
=
this
.
scope
.
rzSliderModel
,
this
.
updateHandles
(
this
.
tracking
,
this
.
minH
.
rzsl
),
this
.
tracking
=
"rzSliderModel"
,
this
.
maxH
.
removeClass
(
"active"
),
this
.
minH
.
addClass
(
"active"
))),
void
(
this
.
scope
[
this
.
tracking
]
!==
c
&&
(
this
.
scope
[
this
.
tracking
]
=
c
,
this
.
updateHandles
(
this
.
tracking
,
f
),
this
.
scope
.
$apply
())))},
onEnd
:
function
(
a
){
this
.
minH
.
removeClass
(
"active"
),
this
.
maxH
.
removeClass
(
"active"
),
a
.
touches
||
"undefined"
!=
typeof
a
.
originalEvent
&&
a
.
originalEvent
.
touches
?(
b
.
unbind
(
"touchmove"
),
b
.
unbind
(
"touchend"
)):(
b
.
unbind
(
"mousemove"
),
b
.
unbind
(
"mouseup"
)),
this
.
tracking
=
""
}},
d
}]).
directive
(
"rzslider"
,[
"Slider"
,
function
(
a
){
return
{
restrict
:
"EA"
,
scope
:{
rzSliderFloor
:
"=?"
,
rzSliderCeil
:
"=?"
,
rzSliderStep
:
"@"
,
rzSliderPrecision
:
"@"
,
rzSliderModel
:
"=?"
,
rzSliderHigh
:
"=?"
,
rzSliderTranslate
:
"&"
},
template
:
'<span class="bar"></span><span class="bar selection"></span><span class="pointer"></span><span class="pointer"></span><span class="bubble limit"></span><span class="bubble limit"></span><span class="bubble"></span><span class="bubble"></span><span class="bubble"></span>'
,
link
:
function
(
b
,
c
,
d
){
return
new
a
(
b
,
c
,
d
)}}}]);
\ No newline at end of file
/*! jusas-angularjs-slider - v0.1.4 - (c) Rafal Zajac <rzajac@gmail.com>, Jussi Saarivirta <jusasi@gmail.com>, https://github.com/Jusas/angularjs-slider.git - 2014-05-09 */
angular
.
module
(
"rzModule"
,[]).
value
(
"throttle"
,
function
(
a
,
b
,
c
){
var
d
,
e
,
f
,
g
=
Date
.
now
||
function
(){
return
(
new
Date
).
getTime
()},
h
=
null
,
i
=
0
;
c
||
(
c
=
{});
var
j
=
function
(){
i
=
c
.
leading
===!
1
?
0
:
g
(),
h
=
null
,
f
=
a
.
apply
(
d
,
e
),
d
=
e
=
null
};
return
function
(){
var
k
=
g
();
i
||
c
.
leading
!==!
1
||
(
i
=
k
);
var
l
=
b
-
(
k
-
i
);
return
d
=
this
,
e
=
arguments
,
0
>=
l
?(
clearTimeout
(
h
),
h
=
null
,
i
=
k
,
f
=
a
.
apply
(
d
,
e
),
d
=
e
=
null
):
h
||
c
.
trailing
===!
1
||
(
h
=
setTimeout
(
j
,
l
)),
f
}}).
factory
(
"Slider"
,[
"$timeout"
,
"$document"
,
"throttle"
,
function
(
a
,
b
,
c
){
var
d
=
function
(
a
,
b
,
c
){
this
.
scope
=
a
,
this
.
attributes
=
c
,
this
.
sliderElem
=
b
,
this
.
range
=
void
0
!==
c
.
rzSliderHigh
&&
void
0
!==
c
.
rzSliderModel
,
this
.
handleHalfWidth
=
0
,
this
.
maxLeft
=
0
,
this
.
precision
=
0
,
this
.
step
=
0
,
this
.
tracking
=
""
,
this
.
minValue
=
0
,
this
.
maxValue
=
0
,
this
.
valueRange
=
0
,
this
.
initRun
=!
1
,
this
.
customTrFn
=
null
,
this
.
fullBar
=
null
,
this
.
selBar
=
null
,
this
.
minH
=
null
,
this
.
maxH
=
null
,
this
.
flrLab
=
null
,
this
.
ceilLab
=
null
,
this
.
minLab
=
null
,
this
.
maxLab
=
null
,
this
.
cmbLab
=
null
,
this
.
init
()};
return
d
.
prototype
=
{
init
:
function
(){
var
b
=
this
;
this
.
scope
.
rzSliderTranslate
&&
(
this
.
customTrFn
=
this
.
scope
.
rzSliderTranslate
()),
this
.
initElemHandles
(),
this
.
calcViewDimensions
(),
this
.
setMinAndMax
(),
this
.
precision
=
void
0
===
this
.
scope
.
rzSliderPrecision
?
0
:
+
this
.
scope
.
rzSliderPrecision
,
this
.
step
=
void
0
===
this
.
scope
.
rzSliderStep
?
1
:
+
this
.
scope
.
rzSliderStep
,
a
(
function
(){
b
.
updateCeilLab
(),
b
.
updateFloorLab
(),
b
.
initHandles
(),
b
.
bindEvents
()}),
this
.
scope
.
$on
(
"reCalcViewDimensions"
,
angular
.
bind
(
this
,
this
.
calcViewDimensions
)),
angular
.
element
(
window
).
on
(
"resize"
,
angular
.
bind
(
this
,
this
.
calcViewDimensions
)),
this
.
initRun
=!
0
;
var
d
=
c
(
function
(){
b
.
setMinAndMax
(),
b
.
updateLowHandle
(
b
.
valueToOffset
(
b
.
scope
.
rzSliderModel
)),
b
.
range
&&
(
b
.
updateSelectionBar
(),
b
.
updateCmbLabel
())},
350
,{
leading
:
!
1
}),
e
=
c
(
function
(){
b
.
setMinAndMax
(),
b
.
updateHighHandle
(
b
.
valueToOffset
(
b
.
scope
.
rzSliderHigh
)),
b
.
updateSelectionBar
(),
b
.
updateCmbLabel
()},
350
,{
leading
:
!
1
});
this
.
scope
.
$on
(
"rzSliderForceRender"
,
function
(){
b
.
resetLabelsValue
(),
d
(),
e
(),
b
.
resetSlider
()}),
this
.
scope
.
$watch
(
"rzSliderModel"
,
function
(
a
,
b
){
a
!==
b
&&
d
()}),
this
.
scope
.
$watch
(
"rzSliderHigh"
,
function
(
a
,
b
){
a
!==
b
&&
e
()}),
this
.
scope
.
$watch
(
"rzSliderFloor"
,
function
(
a
,
c
){
a
!==
c
&&
b
.
resetSlider
()}),
this
.
scope
.
$watch
(
"rzSliderCeil"
,
function
(
a
,
c
){
a
!==
c
&&
b
.
resetSlider
()})},
resetSlider
:
function
(){
this
.
setMinAndMax
(),
this
.
calcViewDimensions
(),
this
.
updateCeilLab
(),
this
.
updateFloorLab
()},
resetLabelsValue
:
function
(){
this
.
minLab
.
rzsv
=
void
0
,
this
.
maxLab
.
rzsv
=
void
0
},
initHandles
:
function
(){
this
.
updateLowHandle
(
this
.
valueToOffset
(
this
.
scope
.
rzSliderModel
)),
this
.
range
&&
(
this
.
updateHighHandle
(
this
.
valueToOffset
(
this
.
scope
.
rzSliderHigh
)),
this
.
updateSelectionBar
(),
this
.
updateCmbLabel
())},
translateFn
:
function
(
a
,
b
,
c
){
c
=
void
0
===
c
?
!
0
:
c
;
var
d
=
this
.
customTrFn
&&
c
?
""
+
this
.
customTrFn
(
a
):
""
+
a
,
e
=!
1
;(
void
0
===
b
.
rzsv
||
b
.
rzsv
.
length
!=
d
.
length
)
&&
(
e
=!
0
,
b
.
rzsv
=
d
),
b
.
text
(
d
),
e
&&
this
.
getWidth
(
b
)},
setMinAndMax
:
function
(){
this
.
minValue
=
this
.
scope
.
rzSliderFloor
?
+
this
.
scope
.
rzSliderFloor
:
this
.
scope
.
rzSliderFloor
=
0
,
this
.
scope
.
rzSliderCeil
?
this
.
maxValue
=+
this
.
scope
.
rzSliderCeil
:
this
.
scope
.
rzSliderCeil
=
this
.
maxValue
=
this
.
range
?
this
.
scope
.
rzSliderHigh
:
this
.
scope
.
rzSliderModel
,
this
.
valueRange
=
this
.
maxValue
-
this
.
minValue
},
initElemHandles
:
function
(){
angular
.
forEach
(
this
.
sliderElem
.
children
(),
function
(
a
,
b
){
var
c
=
angular
.
element
(
a
);
switch
(
b
){
case
0
:
this
.
fullBar
=
c
;
break
;
case
1
:
this
.
selBar
=
c
;
break
;
case
2
:
this
.
minH
=
c
;
break
;
case
3
:
this
.
maxH
=
c
;
break
;
case
4
:
this
.
flrLab
=
c
;
break
;
case
5
:
this
.
ceilLab
=
c
;
break
;
case
6
:
this
.
minLab
=
c
;
break
;
case
7
:
this
.
maxLab
=
c
;
break
;
case
8
:
this
.
cmbLab
=
c
}},
this
),
this
.
fullBar
.
rzsl
=
0
,
this
.
selBar
.
rzsl
=
0
,
this
.
minH
.
rzsl
=
0
,
this
.
maxH
.
rzsl
=
0
,
this
.
flrLab
.
rzsl
=
0
,
this
.
ceilLab
.
rzsl
=
0
,
this
.
minLab
.
rzsl
=
0
,
this
.
maxLab
.
rzsl
=
0
,
this
.
cmbLab
.
rzsl
=
0
,
this
.
range
||
(
this
.
cmbLab
.
remove
(),
this
.
maxLab
.
remove
(),
this
.
maxH
.
remove
(),
this
.
selBar
.
remove
())},
calcViewDimensions
:
function
(){
var
a
=
this
.
getWidth
(
this
.
minH
);
this
.
handleHalfWidth
=
a
/
2
,
this
.
barWidth
=
this
.
getWidth
(
this
.
fullBar
),
this
.
maxLeft
=
this
.
barWidth
-
a
,
this
.
getWidth
(
this
.
sliderElem
),
this
.
sliderElem
.
rzsl
=
this
.
sliderElem
[
0
].
getBoundingClientRect
().
left
,
this
.
initRun
&&
(
this
.
updateCeilLab
(),
this
.
initHandles
())},
updateCeilLab
:
function
(){
this
.
translateFn
(
this
.
scope
.
rzSliderCeil
,
this
.
ceilLab
),
this
.
setLeft
(
this
.
ceilLab
,
this
.
barWidth
-
this
.
ceilLab
.
rzsw
),
this
.
getWidth
(
this
.
ceilLab
)},
updateFloorLab
:
function
(){
this
.
translateFn
(
this
.
scope
.
rzSliderFloor
,
this
.
flrLab
),
this
.
getWidth
(
this
.
flrLab
)},
updateHandles
:
function
(
a
,
b
){
return
"rzSliderModel"
===
a
?(
this
.
updateLowHandle
(
b
),
void
(
this
.
range
&&
(
this
.
updateSelectionBar
(),
this
.
updateCmbLabel
()))):
"rzSliderHigh"
===
a
?(
this
.
updateHighHandle
(
b
),
void
(
this
.
range
&&
(
this
.
updateSelectionBar
(),
this
.
updateCmbLabel
()))):(
this
.
updateLowHandle
(
b
),
this
.
updateHighHandle
(
b
),
this
.
updateSelectionBar
(),
void
this
.
updateCmbLabel
())},
updateLowHandle
:
function
(
a
){
this
.
setLeft
(
this
.
minH
,
a
),
this
.
translateFn
(
this
.
scope
.
rzSliderModel
,
this
.
minLab
),
this
.
setLeft
(
this
.
minLab
,
a
-
this
.
minLab
.
rzsw
/
2
+
this
.
handleHalfWidth
),
this
.
shFloorCeil
()},
updateHighHandle
:
function
(
a
){
this
.
setLeft
(
this
.
maxH
,
a
),
this
.
translateFn
(
this
.
scope
.
rzSliderHigh
,
this
.
maxLab
),
this
.
setLeft
(
this
.
maxLab
,
a
-
this
.
maxLab
.
rzsw
/
2
+
this
.
handleHalfWidth
),
this
.
shFloorCeil
()},
shFloorCeil
:
function
(){
var
a
=!
1
,
b
=!
1
;
this
.
minLab
.
rzsl
<=
this
.
flrLab
.
rzsl
+
this
.
flrLab
.
rzsw
+
5
?(
a
=!
0
,
this
.
hideEl
(
this
.
flrLab
)):(
a
=!
1
,
this
.
showEl
(
this
.
flrLab
)),
this
.
minLab
.
rzsl
+
this
.
minLab
.
rzsw
>=
this
.
ceilLab
.
rzsl
-
this
.
handleHalfWidth
-
10
?(
b
=!
0
,
this
.
hideEl
(
this
.
ceilLab
)):(
b
=!
1
,
this
.
showEl
(
this
.
ceilLab
)),
this
.
range
&&
(
this
.
maxLab
.
rzsl
+
this
.
maxLab
.
rzsw
>=
this
.
ceilLab
.
rzsl
-
10
?
this
.
hideEl
(
this
.
ceilLab
):
b
||
this
.
showEl
(
this
.
ceilLab
),
this
.
maxLab
.
rzsl
<=
this
.
flrLab
.
rzsl
+
this
.
flrLab
.
rzsw
+
this
.
handleHalfWidth
?
this
.
hideEl
(
this
.
flrLab
):
a
||
this
.
showEl
(
this
.
flrLab
))},
updateSelectionBar
:
function
(){
this
.
setWidth
(
this
.
selBar
,
this
.
maxH
.
rzsl
-
this
.
minH
.
rzsl
),
this
.
setLeft
(
this
.
selBar
,
this
.
minH
.
rzsl
+
this
.
handleHalfWidth
)},
updateCmbLabel
:
function
(){
var
a
,
b
;
this
.
minLab
.
rzsl
+
this
.
minLab
.
rzsw
+
10
>=
this
.
maxLab
.
rzsl
?(
this
.
customTrFn
?(
a
=
this
.
customTrFn
(
this
.
scope
.
rzSliderModel
),
b
=
this
.
customTrFn
(
this
.
scope
.
rzSliderHigh
)):(
a
=
this
.
scope
.
rzSliderModel
,
b
=
this
.
scope
.
rzSliderHigh
),
this
.
translateFn
(
a
+
" - "
+
b
,
this
.
cmbLab
,
!
1
),
this
.
setLeft
(
this
.
cmbLab
,
this
.
selBar
.
rzsl
+
this
.
selBar
.
rzsw
/
2
-
this
.
cmbLab
.
rzsw
/
2
),
this
.
hideEl
(
this
.
minLab
),
this
.
hideEl
(
this
.
maxLab
),
this
.
showEl
(
this
.
cmbLab
)):(
this
.
showEl
(
this
.
maxLab
),
this
.
showEl
(
this
.
minLab
),
this
.
hideEl
(
this
.
cmbLab
))},
roundStep
:
function
(
a
){
var
b
=
this
.
step
,
c
=
(
a
-
this
.
minValue
)
%
b
,
d
=
c
>
b
/
2
?
a
+
b
-
c
:
a
-
c
;
return
+
d
.
toFixed
(
this
.
precision
)},
hideEl
:
function
(
a
){
return
a
.
css
({
opacity
:
0
})},
showEl
:
function
(
a
){
return
a
.
css
({
opacity
:
1
})},
setLeft
:
function
(
a
,
b
){
return
a
.
rzsl
=
b
,
a
.
css
({
left
:
b
+
"px"
}),
b
},
getWidth
:
function
(
a
){
var
b
=
a
[
0
].
getBoundingClientRect
();
return
a
.
rzsw
=
b
.
right
-
b
.
left
,
a
.
rzsw
},
setWidth
:
function
(
a
,
b
){
return
a
.
rzsw
=
b
,
a
.
css
({
width
:
b
+
"px"
}),
b
},
valueToOffset
:
function
(
a
){
return
(
a
-
this
.
minValue
)
*
this
.
maxLeft
/
this
.
valueRange
},
offsetToValue
:
function
(
a
){
return
a
/
this
.
maxLeft
*
this
.
valueRange
+
this
.
minValue
},
bindEvents
:
function
(){
this
.
minH
.
on
(
"mousedown"
,
angular
.
bind
(
this
,
this
.
onStart
,
this
.
minH
,
"rzSliderModel"
)),
this
.
range
&&
this
.
maxH
.
on
(
"mousedown"
,
angular
.
bind
(
this
,
this
.
onStart
,
this
.
maxH
,
"rzSliderHigh"
)),
this
.
minH
.
on
(
"touchstart"
,
angular
.
bind
(
this
,
this
.
onStart
,
this
.
minH
,
"rzSliderModel"
)),
this
.
range
&&
this
.
maxH
.
on
(
"touchstart"
,
angular
.
bind
(
this
,
this
.
onStart
,
this
.
maxH
,
"rzSliderHigh"
))},
onStart
:
function
(
a
,
c
,
d
){
d
.
stopPropagation
(),
d
.
preventDefault
(),
""
===
this
.
tracking
&&
(
this
.
calcViewDimensions
(),
this
.
tracking
=
c
,
a
.
addClass
(
"active"
),
d
.
touches
||
"undefined"
!=
typeof
d
.
originalEvent
&&
d
.
originalEvent
.
touches
?(
b
.
on
(
"touchmove"
,
angular
.
bind
(
this
,
this
.
onMove
,
a
)),
b
.
on
(
"touchend"
,
angular
.
bind
(
this
,
this
.
onEnd
))):(
b
.
on
(
"mousemove"
,
angular
.
bind
(
this
,
this
.
onMove
,
a
)),
b
.
on
(
"mouseup"
,
angular
.
bind
(
this
,
this
.
onEnd
))))},
onMove
:
function
(
a
,
b
){
var
c
,
d
=
b
.
clientX
||
(
"undefined"
!=
typeof
b
.
originalEvent
?
b
.
originalEvent
.
touches
[
0
].
clientX
:
b
.
touches
[
0
].
clientX
),
e
=
this
.
sliderElem
.
rzsl
,
f
=
d
-
e
-
this
.
handleHalfWidth
;
return
0
>=
f
?
void
(
0
!==
a
.
rzsl
&&
(
this
.
scope
[
this
.
tracking
]
=
this
.
minValue
,
this
.
updateHandles
(
this
.
tracking
,
0
),
this
.
scope
.
$apply
())):
f
>=
this
.
maxLeft
?
void
(
a
.
rzsl
!==
this
.
maxLeft
&&
(
this
.
scope
[
this
.
tracking
]
=
this
.
maxValue
,
this
.
updateHandles
(
this
.
tracking
,
this
.
maxLeft
),
this
.
scope
.
$apply
())):(
c
=
this
.
offsetToValue
(
f
),
c
=
this
.
roundStep
(
c
),
this
.
range
&&
(
"rzSliderModel"
===
this
.
tracking
&&
c
>=
this
.
scope
.
rzSliderHigh
?(
this
.
scope
[
this
.
tracking
]
=
this
.
scope
.
rzSliderHigh
,
this
.
updateHandles
(
this
.
tracking
,
this
.
maxH
.
rzsl
),
this
.
tracking
=
"rzSliderHigh"
,
this
.
minH
.
removeClass
(
"active"
),
this
.
maxH
.
addClass
(
"active"
)):
"rzSliderHigh"
===
this
.
tracking
&&
c
<=
this
.
scope
.
rzSliderModel
&&
(
this
.
scope
[
this
.
tracking
]
=
this
.
scope
.
rzSliderModel
,
this
.
updateHandles
(
this
.
tracking
,
this
.
minH
.
rzsl
),
this
.
tracking
=
"rzSliderModel"
,
this
.
maxH
.
removeClass
(
"active"
),
this
.
minH
.
addClass
(
"active"
))),
void
(
this
.
scope
[
this
.
tracking
]
!==
c
&&
(
this
.
scope
[
this
.
tracking
]
=
c
,
this
.
updateHandles
(
this
.
tracking
,
f
),
this
.
scope
.
$apply
())))},
onEnd
:
function
(
a
){
this
.
minH
.
removeClass
(
"active"
),
this
.
maxH
.
removeClass
(
"active"
),
a
.
touches
||
"undefined"
!=
typeof
a
.
originalEvent
&&
a
.
originalEvent
.
touches
?(
b
.
unbind
(
"touchmove"
),
b
.
unbind
(
"touchend"
)):(
b
.
unbind
(
"mousemove"
),
b
.
unbind
(
"mouseup"
)),
this
.
scope
.
$emit
(
"slideEnded"
),
this
.
tracking
=
""
}},
d
}]).
directive
(
"rzslider"
,[
"Slider"
,
function
(
a
){
return
{
restrict
:
"EA"
,
scope
:{
rzSliderFloor
:
"=?"
,
rzSliderCeil
:
"=?"
,
rzSliderStep
:
"@"
,
rzSliderPrecision
:
"@"
,
rzSliderModel
:
"=?"
,
rzSliderHigh
:
"=?"
,
rzSliderTranslate
:
"&"
},
template
:
'<span class="bar"></span><span class="bar selection"></span><span class="pointer"></span><span class="pointer"></span><span class="bubble limit"></span><span class="bubble limit"></span><span class="bubble"></span><span class="bubble"></span><span class="bubble"></span>'
,
link
:
function
(
b
,
c
,
d
){
return
new
a
(
b
,
c
,
d
)}}}]);
\ No newline at end of file
rzslider.js
View file @
dac4cee2
...
...
@@ -877,7 +877,7 @@ function throttle(func, wait, options) {
if
(
event
.
touches
||
(
typeof
(
event
.
originalEvent
)
!=
'undefined'
&&
event
.
originalEvent
.
touches
))
{
$document
.
unbind
(
'touchmove'
);
$document
.
unbind
(
'touchend'
);
$document
.
unbind
(
'touchend'
);
}
else
{
...
...
@@ -885,6 +885,8 @@ function throttle(func, wait, options) {
$document
.
unbind
(
'mouseup'
);
}
this
.
scope
.
$emit
(
'slideEnded'
);
this
.
tracking
=
''
;
}
};
...
...
Write
Preview
Markdown
is supported
0%
Try again
or
attach a new file
Attach a file
Cancel
You are about to add
0
people
to the discussion. Proceed with caution.
Finish editing this message first!
Cancel
Please
register
or
sign in
to comment