Untitled Application
Desktop
False
800
600
False
False
False
WebApp
False
/*......... style for appearance1........page:appearances1 .... */
#appearance1 .rs-range-color {
background-color: #5673E7;
}
#appearance1 .rs-path-color {
background-color: #dedede;
}
#appearance1 .rs-handle {
background-color: #000000;
}
#appearance1 .rs-border {
border-color: white;
}
/*......... style for appearance2........page:appearances1 .... */
#appearance2 .rs-range-color {
background-color: #ff8d00;
}
#appearance2 .rs-handle:after {
background-color: #000000;
}
#appearance2 .rs-border {
border-color: #ff8d00;
}
/*......... style for appearance3........page:appearances1 .... */
#appearance3 .rs-range-color {
background-color: black;
}
#appearance3 .rs-handle {
background-color: #fff;
border: 5px solid black;
}
/*......... style for appearance4........page:appearances1 .... */
#appearance4 .rs-range-color {
background-color: #00FFF5;
}
#appearance4 .rs-path-color {
background-color: #382d5f;
border-radius: 0;
}
#appearance4 .rs-handle {
background-color: #00FFF5;
}
#appearance4 .rs-border {
border: 8px solid #382d5f;
}
/*......... style for appearance5........page:appearances2 .... */
#appearance5 .rs-border.rs-outer {
border: 16px dotted #61A9DC;
}
#appearance5 .rs-border.rs-inner {
border-width: 0px;
}
#appearance5 .rs-handle {
background: black;
margin-left: 0 !important;
}
/*......... style for appearance6........page:appearances2 .... */
#appearance6 .rs-border {
border-width: 0px;
}
#appearance6 .rs-border.rs-outer {
border: 14px solid #aaa;
}
#appearance6 .rs-range-color {
background: black;
}
#appearance6 .rs-handle {
background: black;
margin-left: 0 !important;
}
/*......... style for appearance7........page:appearances2 .... */
#appearance7 .rs-range-color {
background-color: #33B5E5;
}
#appearance7 .rs-path-color {
background-color: #C2E9F7;
}
#appearance7 .rs-handle {
background-color: #C2E9F7;
padding: 7px;
border: 2px solid #C2E9F7;
}
#appearance7 .rs-handle.rs-focus {
border-color: #33B5E5;
}
#appearance7 .rs-handle:after {
border-color: #33B5E5;
background-color: #33B5E5;
}
#appearance7 .rs-border {
border-color: transparent;
}
/*......... style for appearance8........page:appearances2 .... */
#appearance8 .rs-range-color {
background: radial-gradient(ellipse at bottom, rgba(0, 0, 0, 1) 0%, rgba(48, 7, 36, 1) 34%, rgba(255, 255, 255, 1) 66%, rgba(0, 0, 0, 1) 100%);
}
#appearance8 .rs-path-color {
background: radial-gradient(ellipse at bottom, rgba(255, 255, 255, 1) 0%, rgba(169, 173, 174, 1) 34%, rgba(255, 255, 255, 1) 66%, rgba(5, 0, 0, 1) 100%);
}
#appearance8 .rs-handle {
background: radial-gradient(ellipse at center, rgba(228, 228, 228, 1) 0%, rgba(179, 179, 179, 1) 34%, rgb(102, 91, 98) 100%);
}
#appearance8 .rs-border {
border-color: white;
}
/*......... style for handle1........page:customHandleShape .... */
#handle1 .rs-handle {
background-color: transparent;
border: 8px solid transparent;
border-right-color: black;
margin: -6px 0px 0px 14px !important;
border-width: 6px 104px 6px 4px;
}
#handle1 .rs-handle:before {
display: block;
content: " ";
position: absolute;
height: 22px;
width: 22px;
background: black;
right: -11px;
bottom: -11px;
border-radius: 100px;
}
#handle1 .rs-tooltip {
top: 75%;
font-size: 11px;
}
#handle1 .rs-tooltip div {
text-align: center;
background: orange;
color: white;
border-radius: 4px;
padding: 1px 5px 2px;
margin-top: 4px;
}
#handle1 .rs-range-color {
background-color: #DB5959;
}
#handle1 .rs-path-color {
background-color: #F0C5C5;
}
/*......... style for handle2........page:customHandleShape .... */
#handle2 .rs-handle {
background-color: transparent;
border: 8px solid transparent;
border-right-color: black;
margin: -8px 0 0 14px !important;
}
#handle2 .rs-handle:before {
display: block;
content: " ";
position: absolute;
height: 12px;
width: 12px;
background: black;
right: -6px;
bottom: -6px;
border-radius: 100%;
}
#handle2 .rs-handle:after {
display: block;
content: " ";
width: 106px;
position: absolute;
top: -1px;
right: 0px;
border-top: 2px dotted black;
}
#handle2 .rs-range-color {
background-color: #8832cd;
}
#handle2 .rs-path-color {
background-color: #ddc5f0;
}
/*......... style for tooltip1........page:customization .... */
#tooltip1 {
height: 160px !important;
width: 100% !important;
overflow: hidden;
padding: 10px;
}
#tooltip1 .rs-container {
left: 50%;
margin-left: -300px;
}
#tooltip1 .rs-tooltip {
top: 100px;
}
/*......... style for tooltip2........page:customization .... */
#tooltip2 .rs-path-color {
background-color: #939393;
}
#tooltip2 .rs-handle {
background-color: orange;
}
en
[AndroidOS,iOS,WindowsPhoneOS]
normal
True
True
False
True
True
False
False
True
False
False
setvar [myVar] [e]
setvar [x] [myVar.value]
If [x] < 20
setvar [speed] "Slow"
ElseIf [x] < 40
setvar [speed] "Normal"
ElseIf [x] < 70
setvar [speed] "Speed"
Else
setvar [speed] "Very Speed"
EndIf
Return "[x] km/h <div>[speed] </div>"
[e]|STRING|parameter
setvar [y] [y]+1
refresh
[e]|STRING|parameter
MessageBox "Hello" "You have successfully done dragging" "ok" ""
[event]|STRING|
setvar [p1] [args]
setvar [index] [p1.value]
CreateArray [months] "January,February,March,April,May,June,July,August,September,October,November,December"
Return "[months([index])]"
[args]|STRING|parameter
setvar [p2] [args]
setvar [sign] [p2.value]
Return "$ [sign]"
[args]|STRING|
0px
0px
800px
600px
startback
286px
401px
229px
63px
start
info
GotoNextPage
129px
71px
547px
127px
roundSlider
85px
193px
653px
18px
266px
229px
272px
55px
Author:asmat
MasterPage
SetVar [topic] "Various Slider Types"
...............................................................................
roundSlider "type1" "30" "default" "" "" "" "" "" true true true false "" "" "" "" "" "" "" ""
roundSlider "type2" "30" "min-range" "" "" "" "" "" true true true false "" "" "" "" "" "" "" ""
roundSlider "type3" "30" "range" "" "" "" "" "" true true true false "" "" "" "" "" "" "" ""
15px
71px
760px
87px
There are three types of sliders available such as default, min-range and range slider. The default and min-range sliders are the similar which is used to select a single value inbetween the min and max values. In case of range slider, it is used to selece a range of values.
124px
219px
170px
170px
314px
219px
170px
170px
503px
219px
170px
170px
MasterPage
Setvar [topic] "Various Circle Shapes"
.......................................................................................
roundSlider "shape1" "30" "min-range" "quarter-top-left" "" "" "" "" true true true false "" "" "" "" "" "" "" ""
roundSlider "shape2" "30" "min-range" "quarter-top-right" "" "" "" "" true true true false "" "" "" "" "" "" "" ""
roundSlider "shape3" "30" "min-range" "quarter-bottom-left" "" "" "" "" true true true false "" "" "" "" "" "" "" ""
roundSlider "shape4" "30" "min-range" "quarter-bottom-right" "" "" "" "" true true true false "" "" "" "" "" "" "" ""
roundSlider "shape5" "30" "min-range" "half-top" "" "" "" "" true true true false "" "" "" "" "" "" "" ""
roundSlider "shape6" "30" "min-range" "half-bottom" "" "" "" "" true true true false "" "" "" "" "" "" "" ""
15px
71px
760px
87px
The roundSlider not only means the complete round circle, it also supports the most commonly used circle shapes such as:
Quarter Circle ( quarter-top-left, quarter-top-right, quarter-bottom-left, quarter-bottom-right)
Half Circle (half-top, half-bottom, half-left, half-right)
Pie shape
123px
157px
170px
170px
313px
157px
170px
170px
502px
157px
170px
170px
123px
347px
170px
170px
313px
347px
170px
170px
502px
347px
170px
170px
MasterPage
Setvar [topic] "Various Circle Shapes"
.......................................................................................
roundSlider "shape7" "30" "min-range" "half-left" "" "" "" "" true true true false "" "" "" "" "" "" "" ""
roundSlider "shape8" "30" "min-range" "half-right" "" "" "" "" true true true false "" "" "" "" "" "" "" ""
roundSlider "shape9" "30" "min-range" "pie" "" "" "" "" true true true false "" "" "" "" "" "" "" ""
roundSlider "shape10" "30" "min-range" "custom-half" "" "" "" "" true true true false "" "" "" "" "" "" "" ""
roundSlider "shape11" "30" "min-range" "custom-quarter" "" "" "" "" true true true false "" "" "" "" "" "" "" ""
15px
71px
760px
87px
The roundSlider not only means the complete round circle, it also supports the most commonly used circle shapes such as:
Quarter Circle ( quarter-top-left, quarter-top-right, quarter-bottom-left, quarter-bottom-right)
Half Circle (half-top, half-bottom, half-left, half-right)
Pie shape
123px
157px
170px
170px
313px
157px
170px
170px
502px
157px
170px
170px
123px
347px
170px
170px
313px
347px
170px
170px
MasterPage
SetVar [topic] "Different Theming and Appearances 1"
................................................................
roundSlider "appearance1" "30" "min-range" "" "80" "" "" "" true true true false "" "" "" "" "24,12" "square" "14" ""
roundSlider "appearance2" "40" "min-range" "" "80" "" "" "" true true true false "" "" "" "" "+8" "dot" "14" ""
roundSlider "appearance3" "40" "min-range" "" "80" "" "" "" true true true false "" "" "" "" "+8" "dot" "9" ""
roundSlider "appearance4" "40,60" "range" "" "80" "" "" "" true true true false "" "" "" "" "+10" "dot" "10" ""
15px
71px
760px
87px
The following demos show that, in what are the ways we can customize the control. The below examples may provide an idea to make different look and feel.
219px
148px
170px
170px
409px
148px
170px
170px
219px
338px
170px
170px
409px
338px
170px
170px
MasterPage
SetVar [topic] "Different Theming and Appearances 2"
................................................................
roundSlider "appearance5" "60" "min-range" "" "80" "" "" "" true true true false "" "" "" "" "16" "square" "0" ""
roundSlider "appearance6" "5,55" "range" "" "80" "" "" "" true true true false "" "" "" "" "+0" "dot" "14" ""
roundSlider "appearance7" "65" "min-range" "" "80" "" "" "" true true true false "" "" "" "" "+16" "dot" "8" ""
roundSlider "appearance8" "55" "min-range" "" "80" "" "" "" true true true false "" "" "" "" "+0" "dot" "22" ""
15px
71px
760px
87px
The following demos show that, in what are the ways we can customize the control. The below examples may provide an idea to make different look and feel.
219px
148px
170px
170px
409px
148px
170px
170px
219px
338px
170px
170px
409px
338px
170px
170px
MasterPage
SetVar [topic] "Custom Handle Shapes"
................................................................
roundSlider "handle1" "20" "min-range" "pie" "105" "" "" "" true false true false "" "" "315" "" "0" "square" "16" "edit"
roundSlider "handle2" "68" "min-range" "half-top" "130" "" "" "" false false true false "" "" "315" "" "0" "square" "16" ""
15px
71px
760px
87px
The handle shapes are defined in the ".rs-handle" class. By customizing this class we can make different shapes of handle.
The below examples shows the gauge like appearances.
108px
193px
210px
210px
349px
189px
260px
130px
MasterPage
SetVar [topic] "Properties"
....................................................................
roundSlider "slider1" "3000" "min-range" "" "" "1000" "10000" "1000" true true true false "" "" "" "" "" "" "" ""
roundSlider "slider2" "30" "default" "" "70" "" "" "" true true true false "" "" "" "" "+10" "dot" "10" ""
roundSlider "slider3" "50" "" "" "" "" "" "" true true true false "" "" "" "" "34,10" "" "" ""
roundSlider "slider4" "45" "" "" "" "" "" "" true true true false "" "" "90" "+225" "" "" "" ""
roundSlider "slider5" "30" "" "" "" "" "" "" true true true false "" "" "" "" "" "" "" ""
roundSlider "slider6" "30" "" "" "" "" "" "" true false true false "" "" "" "" "" "" "" ""
15px
71px
760px
87px
The following demos shows the basic usage of some properties.
123px
133px
170px
170px
313px
133px
170px
170px
502px
133px
170px
170px
123px
347px
170px
170px
313px
347px
170px
170px
502px
347px
170px
170px
124px
99px
169px
31px
min max step and value
312px
99px
169px
31px
width and radius
506px
99px
169px
31px
handleSize
312px
318px
169px
31px
mouseScrollAction
121px
318px
169px
31px
startAngle and endAngle
503px
318px
169px
31px
editable tooltip
MasterPage
SetVar [topic] "Subroutines"
.........................................
roundSlider "slider_event" "40" "range" "" "130" "" "" "" true true true false "OnDrag" "OnStop" "" "" "" "dot" "25" ""
15px
71px
760px
87px
The following demo shows the basic usage of the events.
122px
179px
260px
260px
452px
193px
229px
54px
y
0
MasterPage
SetVar [topic] "Customization"
................................................
roundSlider "tooltip1" "4" "min-range" "custom-quarter" "300" "0" "11" "" true false false false "" "" "45" "" "" "dot" "20" "tooltip1"
roundSlider "tooltip2" "98" "default" "" "90" "" "" "" true false false false "" "" "" "" "+14" "" "4" "tooltip2"
15px
71px
760px
87px
Due to the flexibility of roundSlider, the user can do any customization based on their requirement. Here, some examples for the basic customization.
22px
199px
422px
209px
0px
21px
260px
260px
534px
208px
180px
180px
126px
214px
547px
127px
The End
0px
544px
800px
55px
0
16px
553px
40px
40px
fill:#ffffff
svgArrowCircleLeft
GotoPrevPage
0px
0px
800px
60px
0
0px
544px
800px
55px
0
16px
553px
40px
40px
fill:#ffffff
svgArrowCircleLeft
GotoPrevPage
732px
552px
40px
40px
fill:#ffffff
svgArrowCircleRight
GotoNextPage
93px
10px
605px
40px
<strong style="color: #838383;">Tutorial </strong>[topic]
h2
0px
0px
800px
600px
False