Update demo sample with input range example

Samples/assets/invader.rcss

@@ -109,6 +109,16 @@
 	sliderarrowinc: 28px 152px 27px 24px;
 	sliderarrowinc-hover: 28px 177px 27px 24px;
 	sliderarrowinc-active: 28px 202px 27px 24px;
+	
+	range-track:       219px 194px  3px 32px;
+	range-track-inner: 220px 204px  1px 14px;
+	range-bar:         127px 191px 34px 32px;
+	range-dec:           3px 232px 17px 17px;
+	range-dec-hover:    21px 232px 17px 17px;
+	range-dec-active:   39px 232px 17px 17px;
+	range-inc:           3px 250px 17px 17px;
+	range-inc-hover:    21px 250px 17px 17px;
+	range-inc-active:   39px 250px 17px 17px;
 }
 
 body
@@ -480,6 +490,43 @@ input.checkbox:checked:active
 	decorator: image(checkbox-checked-active);
 }
 
+input.range {
+	width: 200px;
+	height: 32px;
+	vertical-align: -12px;
+}
+input.range slidertrack {
+	margin-top: 3px;
+	height: 22px;
+	image-color: #ecc;
+	decorator: ninepatch( range-track, range-track-inner );
+}
+input.range sliderbar {
+	margin-left: -8px;
+	margin-right: -7px;
+	margin-top: -3px;
+	width: 34px;
+	height: 23px;
+	decorator: image( range-bar );
+}
+input.range:hover sliderbar {
+	image-color: #cc0;
+}
+input.range sliderbar:active {
+	image-color: #c80;
+}
+input.range sliderarrowdec, input.range sliderarrowinc {
+	width: 17px;
+	height: 17px;
+	margin-top: 6px;
+}
+input.range sliderarrowdec        { decorator: image( range-dec        ); }
+input.range sliderarrowinc        { decorator: image( range-inc        ); }
+input.range sliderarrowdec:hover  { decorator: image( range-dec-hover  ); }
+input.range sliderarrowinc:hover  { decorator: image( range-inc-hover  ); }
+input.range sliderarrowdec:active { decorator: image( range-dec-active ); }
+input.range sliderarrowinc:active { decorator: image( range-inc-active ); }
+
 datagrid datagridheader
 {
 	width: auto;

Samples/basic/benchmark/data/benchmark.rml

@@ -10,43 +10,6 @@
 			width: 1600px;
 			height: 750px;
 		}
-		div#title_bar div#icon
-		{
-			display: none;
-		}
-		input.range {
-			width: 280dp;
-			height: 20dp;
-		}
-		input.range slidertrack {
-			margin-top: 6dp;
-			background-color: #fff5;
-			height: 8dp;
-		}
-		input.range sliderbar {
-			background-color: #333;
-			width: 12dp;
-			height: 20dp;
-		}
-		input.range:hover sliderbar, body.window input.range:hover sliderbar {
-			background-color: #f3d255;
-		}
-		input.range sliderbar:active, body.window input.range sliderbar:active {
-			background-color: #faebb4;
-		}
-		input.range sliderarrowdec, input.range sliderarrowinc {
-			background-color: #3f2e1c;
-			width: 10dp;
-			height: 12dp;
-			margin-top: 4dp;
-		}
-		input.range sliderarrowdec:hover, input.range sliderarrowinc:hover {
-			background-color: #f3d255;
-		}
-		input.range sliderarrowdec:active, input.range sliderarrowinc:active {
-			background-color: #faebb4;
-		}
-
 		#fps 
 		{
 			position: absolute;

Samples/basic/demo/data/demo.rml

@@ -175,6 +175,15 @@ form h2
 	font-weight: bold;
 	margin-top: 8px;
 }
+#rating {
+	display: inline-block;
+	width: 40px;
+	padding-left: 1em;
+}
+#rating_emoji { 
+	color: #ffd40f;
+	font-size: 1.7em;
+}
 #form_output 
 {
 	border: 1px #666;
@@ -323,6 +332,10 @@ form h2
 			<input type="checkbox" name="meals" value="pasta" checked/> Pasta
 			<input type="checkbox" name="meals" value="lasagne" checked/> Lasagne
 		</div>
+		<h2>Rating</h2>
+		<div>
+			<input type="range" name="rating" min="0" max="100" step="1" value="50" onchange="rating" onshow="rating"/> <span id="rating"/><span id="rating_emoji">&nbsp;</span>
+		</div>
 		<h2>Subject</h2>
 		<div>
 			<select name="subject">

Samples/basic/demo/src/main.cpp

@@ -233,6 +233,32 @@ public:
 			if(auto parent = element->GetParentNode())
 				parent->SetInnerRML("<button id='exit' onclick='exit'>Exit</button>");
 		}
+		else if (value == "rating")
+		{
+			auto el_rating = element->GetElementById("rating");
+			auto el_rating_emoji = element->GetElementById("rating_emoji");
+			if (el_rating && el_rating_emoji)
+			{
+				enum { Sad, Mediocre, Exciting, Celebrate, Champion, CountBonus };
+				static const Rml::Core::String emojis[CountBonus] = { u8"😢", u8"😐", u8"😮", u8"😎", u8"🏆" };
+				int value = std::atoi(static_cast<Rml::Controls::ElementFormControl*>(element)->GetValue().c_str());
+				
+				Rml::Core::String emoji;
+				if (value <= 0)
+					emoji = emojis[Sad];
+				else if(value < 50)
+					emoji = emojis[Mediocre];
+				else if (value < 75)
+					emoji = emojis[Exciting];
+				else if (value < 100)
+					emoji = emojis[Celebrate];
+				else
+					emoji = emojis[Champion];
+
+				el_rating->SetInnerRML(Rml::Core::CreateString(30, "%d%%", value));
+				el_rating_emoji->SetInnerRML(emoji);
+			}
+		}
 		else if (value == "submit_form")
 		{
 			if (auto el_output = element->GetElementById("form_output"))