Added a new example for the RadSlider control. Using three sliders to choose a RGB color

Slider/ChooseColorWithRGBSliders/ChooseColorWithRGBSliders.jsproj

@@ -0,0 +1,82 @@
+<?xml version="1.0" encoding="utf-8"?>
+<Project ToolsVersion="4.0" DefaultTargets="Build" xmlns="http://schemas.microsoft.com/developer/msbuild/2003">
+  <ItemGroup Label="ProjectConfigurations">
+    <ProjectConfiguration Include="Debug|AnyCPU">
+      <Configuration>Debug</Configuration>
+      <Platform>AnyCPU</Platform>
+    </ProjectConfiguration>
+    <ProjectConfiguration Include="Debug|ARM">
+      <Configuration>Debug</Configuration>
+      <Platform>ARM</Platform>
+    </ProjectConfiguration>
+    <ProjectConfiguration Include="Debug|x64">
+      <Configuration>Debug</Configuration>
+      <Platform>x64</Platform>
+    </ProjectConfiguration>
+    <ProjectConfiguration Include="Debug|x86">
+      <Configuration>Debug</Configuration>
+      <Platform>x86</Platform>
+    </ProjectConfiguration>
+    <ProjectConfiguration Include="Release|AnyCPU">
+      <Configuration>Release</Configuration>
+      <Platform>AnyCPU</Platform>
+    </ProjectConfiguration>
+    <ProjectConfiguration Include="Release|ARM">
+      <Configuration>Release</Configuration>
+      <Platform>ARM</Platform>
+    </ProjectConfiguration>
+    <ProjectConfiguration Include="Release|x64">
+      <Configuration>Release</Configuration>
+      <Platform>x64</Platform>
+    </ProjectConfiguration>
+    <ProjectConfiguration Include="Release|x86">
+      <Configuration>Release</Configuration>
+      <Platform>x86</Platform>
+    </ProjectConfiguration>
+  </ItemGroup>
+  <PropertyGroup Label="Globals">
+    <ProjectGuid>75a1624f-45eb-4ae7-8e30-471382171045</ProjectGuid>
+  </PropertyGroup>
+  <PropertyGroup Condition="'$(VisualStudioVersion)' == '' or '$(VisualStudioVersion)' &lt; '11.0'">
+    <VisualStudioVersion>11.0</VisualStudioVersion>
+  </PropertyGroup>
+  <Import Project="$(MSBuildExtensionsPath)\$(MSBuildToolsVersion)\Microsoft.Common.props" Condition="Exists('$(MSBuildExtensionsPath)\$(MSBuildToolsVersion)\Microsoft.Common.props')" />
+  <Import Project="$(MSBuildExtensionsPath32)\Microsoft\VisualStudio\v$(VisualStudioVersion)\$(WMSJSProjectDirectory)\Microsoft.VisualStudio.$(WMSJSProject).Default.props" />
+  <Import Project="$(MSBuildExtensionsPath32)\Microsoft\VisualStudio\v$(VisualStudioVersion)\$(WMSJSProjectDirectory)\Microsoft.VisualStudio.$(WMSJSProject).props" />
+  <PropertyGroup>
+    <TargetPlatformIdentifier>Windows</TargetPlatformIdentifier>
+    <TargetPlatformVersion>8.0</TargetPlatformVersion>
+    <DefaultLanguage>en-US</DefaultLanguage>
+    <PackageCertificateKeyFile>ChooseColorWithRGBSliders_TemporaryKey.pfx</PackageCertificateKeyFile>
+  </PropertyGroup>
+  <ItemGroup>
+    <AppxManifest Include="package.appxmanifest">
+      <SubType>Designer</SubType>
+    </AppxManifest>
+    <Content Include="default.html" />
+    <Content Include="images\logo.png" />
+    <Content Include="images\smalllogo.png" />
+    <Content Include="images\splashscreen.png" />
+    <Content Include="images\storelogo.png" />
+    <Content Include="js\default.js" />
+    <Content Include="css\default.css" />
+    <Content Include="ReadMe.html" />
+    <None Include="ChooseColorWithRGBSliders_TemporaryKey.pfx" />
+  </ItemGroup>
+  <ItemGroup>
+    <SDKReference Include="Microsoft.WinJS.1.0, Version=1.0" />
+    <SDKReference Include="Telerik.UI, Version=2013.2.716" />
+  </ItemGroup>
+  <Import Project="$(MSBuildExtensionsPath32)\Microsoft\VisualStudio\v$(VisualStudioVersion)\$(WMSJSProjectDirectory)\Microsoft.VisualStudio.$(WMSJSProject).targets" />
+  <!-- To modify your build process, add your task inside one of the targets below then uncomment
+       that target and the DisableFastUpToDateCheck PropertyGroup. 
+       Other similar extension points exist, see Microsoft.Common.targets.
+  <Target Name="BeforeBuild">
+  </Target>
+  <Target Name="AfterBuild">
+  </Target>
+  <PropertyGroup>
+    <DisableFastUpToDateCheck>true</DisableFastUpToDateCheck>
+  </PropertyGroup>
+  -->
+</Project>

Slider/ChooseColorWithRGBSliders/ReadMe.html

@@ -0,0 +1,10 @@
+<p>
+	In this example there are three RadSliders, one for each of the three colors in the RGB palette. By dragging the slide handle the color in the 
+    square on the right changes. The color also changes if the user taps on the slider scale.
+</p>
+<p>
+    To achieve this, five configuration properties of RadSlider have been used and and event handler has been added to both the change and slide events.
+</p>
+<p>
+    There is a detailed explanation on how this can be achieved in the RadSlider's documentation under the "How To" section.
+</p>

Slider/ChooseColorWithRGBSliders/css/default.css

@@ -0,0 +1,70 @@
+.mainContent {
+	margin: 120px;
+    display: -ms-grid;
+    -ms-grid-columns: 4fr 8fr;
+    -ms-grid-rows: auto;
+}
+
+.info {
+	color: #feef7a;
+	margin-left: 120px;
+}
+
+#slider-container {
+    -ms-grid-column: 1;
+    -ms-grid-row: 1;
+
+    display: -ms-grid;
+    -ms-grid-columns: 1fr 1fr 1fr;
+    -ms-grid-rows: 1fr 10fr;
+
+    text-align: center;
+}
+
+    #slider-container h2 {
+        -ms-grid-column: 1;
+        -ms-grid-column-span: 3;
+        -ms-grid-row: 1;
+    }
+
+    #sliderRed-container {
+        -ms-grid-column: 1;
+        -ms-grid-row: 2;
+    }
+
+    #sliderGreen-container {
+        -ms-grid-column: 2;
+        -ms-grid-row: 2;
+    }
+
+    #sliderBlue-container {
+        -ms-grid-column: 3;
+        -ms-grid-row: 2;
+    }
+
+#color-sample-container {
+    -ms-grid-column: 2;
+    -ms-grid-row: 1;
+
+    display: -ms-grid;
+    -ms-grid-columns: 1fr;
+    -ms-grid-rows: 1fr 10fr;
+
+    padding-left: 50px;
+}
+
+    #color-sample-container h2 {
+        -ms-grid-column: 1;
+        -ms-grid-row: 1;
+    }
+
+    #color-sample {
+        -ms-grid-column: 1;
+        -ms-grid-row: 2;
+
+        width: 310px;
+        height: 310px;
+        background: rgb(0, 0, 0);
+        border: 2px solid #FFF;
+        margin-top: 18px;
+    }

Slider/ChooseColorWithRGBSliders/default.html

@@ -0,0 +1,75 @@
+<!DOCTYPE html>
+<html>
+<head>
+	<meta charset="utf-8" />
+	<title>Customization</title>
+
+	<!-- WinJS references -->
+	<link href="//Microsoft.WinJS.1.0/css/ui-dark.css" rel="stylesheet" />
+	<script src="//Microsoft.WinJS.1.0/js/base.js"></script>
+	<script src="//Microsoft.WinJS.1.0/js/ui.js"></script>
+
+	<!-- Telerik references -->
+	<link href="///Telerik.UI/css/common.css" rel="stylesheet" />
+	<link href="///Telerik.UI/css/dark.css" rel="stylesheet" />
+	<script src="///Telerik.UI/js/jquery.js"></script>
+	<script src="///Telerik.UI/js/ui.js"></script>
+
+	<!-- Customization references -->
+	<link href="/css/default.css" rel="stylesheet" />
+	<script src="/js/default.js"></script>
+</head>
+<body>
+	<section class="mainContent">
+		<section id="slider-container">
+            <h2>RGB Sliders</h2>
+            <!-- #region controls-definition -->
+            <div id="sliderRed-container">
+                <p>Red</p>
+                <div id="sliderRed" data-win-control="Telerik.UI.RadSlider" data-win-options="{
+                        min: 0,
+                        max: 255,
+                        orientation: 'vertical',
+                        smallStep: 5,
+                        largeStep: 50,
+                        onslide: RGBSlider.ChangeSlideHandler,
+                        onchange: RGBSlider.ChangeSlideHandler
+                    }"></div>
+            </div>
+            <div id="sliderGreen-container">
+                <p>Green</p>
+                <div id="sliderGreen" data-win-control="Telerik.UI.RadSlider" data-win-options="{
+                        min: 0,
+                        max: 255,
+                        orientation: 'vertical',
+                        smallStep: 5,
+                        largeStep: 50,
+                        onslide: RGBSlider.ChangeSlideHandler,
+                        onchange: RGBSlider.ChangeSlideHandler
+                    }"></div>
+            </div>
+            <div id="sliderBlue-container">
+                <p>Blue</p>
+                <div id="sliderBlue" data-win-control="Telerik.UI.RadSlider" data-win-options="{
+                        min: 0,
+                        max: 255,
+                        orientation: 'vertical',
+                        smallStep: 5,
+                        largeStep: 50,
+                        onslide: RGBSlider.ChangeSlideHandler,
+                        onchange: RGBSlider.ChangeSlideHandler
+                    }"></div>
+            </div>
+            <!-- #endregion -->
+        </section>
+        <section id="color-sample-container">
+            <h2>Color Sample</h2>
+            <div id="color-sample"></div>
+        </section>
+	</section>
+	<div class="info" data-win-control="WinJS.UI.HtmlControl" data-win-options="{
+		uri: 'readme.html'
+	}">
+	</div>
+</body>
+</html>

Slider/ChooseColorWithRGBSliders/js/default.js

@@ -0,0 +1,59 @@
+// For an introduction to the Blank template, see the following documentation:
+// http://go.microsoft.com/fwlink/?LinkId=232509
+(function () {
+    "use strict";
+
+    WinJS.Binding.optimizeBindingReferences = true;
+
+    var app = WinJS.Application;
+    var activation = Windows.ApplicationModel.Activation;
+
+    var colorContainer,
+        sliderRedValue = 0,
+        sliderGreenValue = 0,
+        sliderBlueValue = 0;
+
+    function changeSlideHandler(e) {
+        var slider = e.target;
+
+        if (slider.element.id == "sliderRed") {
+            sliderRedValue = e.value;
+        } else if (slider.element.id == "sliderGreen") {
+            sliderGreenValue = e.value;
+        } else if (slider.element.id == "sliderBlue") {
+            sliderBlueValue = e.value;
+        }
+
+        colorContainer.style.background = "rgb(" + sliderRedValue + "," + sliderGreenValue + "," + sliderBlueValue + ")";
+    }
+
+    WinJS.Namespace.define("RGBSlider", {
+        ChangeSlideHandler: WinJS.Utilities.markSupportedForProcessing(changeSlideHandler)
+    });
+
+    app.onactivated = function (args) {
+        if (args.detail.kind === activation.ActivationKind.launch) {
+            if (args.detail.previousExecutionState !== activation.ApplicationExecutionState.terminated) {
+                // TODO: This application has been newly launched. Initialize
+                // your application here.
+            } else {
+                // TODO: This application has been reactivated from suspension.
+                // Restore application state here.
+            }
+            args.setPromise(WinJS.UI.processAll().then(function() {
+                colorContainer = document.getElementById("color-sample");
+            }));
+        }
+    };
+
+    app.oncheckpoint = function (args) {
+        // TODO: This application is about to be suspended. Save any state
+        // that needs to persist across suspensions here. You might use the
+        // WinJS.Application.sessionState object, which is automatically
+        // saved and restored across suspension. If you need to complete an
+        // asynchronous operation before your application is suspended, call
+        // args.setPromise().
+    };
+
+    app.start();
+})();

Slider/ChooseColorWithRGBSliders/package.appxmanifest

@@ -0,0 +1,48 @@
+<?xml version="1.0" encoding="utf-8"?>
+<Package xmlns="http://schemas.microsoft.com/appx/2010/manifest">
+
+  <Identity
+    Name="75a1624f-45eb-4ae7-8e30-471382171045"
+    Version="1.0.0.0"
+    Publisher="CN=myankov" />
+
+  <Properties>
+    <DisplayName>ChooseColorWithRGBSliders</DisplayName>
+    <PublisherDisplayName>myankov</PublisherDisplayName>
+    <Logo>images\storelogo.png</Logo>
+  </Properties>
+
+  <Prerequisites>
+    <OSMinVersion>6.2.1</OSMinVersion>
+    <OSMaxVersionTested>6.2.1</OSMaxVersionTested>
+  </Prerequisites>
+
+  <Resources>
+    <Resource Language="x-generate" />
+  </Resources>
+
+  <Applications>
+    <Application 
+      Id="App"
+      StartPage="default.html">
+
+      <VisualElements
+        DisplayName="ChooseColorWithRGBSliders"
+        Logo="images\logo.png"
+        SmallLogo="images\smalllogo.png"
+        Description="ChooseColorWithRGBSliders"
+        ForegroundText="light"
+        BackgroundColor="#464646">
+
+        <DefaultTile ShowName="allLogos" />
+        <SplashScreen Image="images\splashscreen.png" />
+
+      </VisualElements>
+    </Application>
+  </Applications>
+
+  <Capabilities>
+    <Capability Name="internetClient" />
+  </Capabilities>
+
+</Package>

Slider/Slider.sln

@@ -5,6 +5,8 @@ Project("{262852C6-CD72-467D-83FE-5EEB1973A190}") = "GettingStarted", "GettingSt
 EndProject
 Project("{262852C6-CD72-467D-83FE-5EEB1973A190}") = "Customization", "CustomizingTicksAndLabels\Customization.jsproj", "{63C84321-8AA7-4E38-A778-675E07B0CB3D}"
 EndProject
+Project("{262852C6-CD72-467D-83FE-5EEB1973A190}") = "ChooseColorWithRGBSliders", "ChooseColorWithRGBSliders\ChooseColorWithRGBSliders.jsproj", "{75A1624F-45EB-4AE7-8E30-471382171045}"
+EndProject
 Global
 	GlobalSection(SolutionConfigurationPlatforms) = preSolution
 		Debug|Any CPU = Debug|Any CPU
@@ -65,6 +67,30 @@ Global
 		{63C84321-8AA7-4E38-A778-675E07B0CB3D}.Release|x86.ActiveCfg = Release|x86
 		{63C84321-8AA7-4E38-A778-675E07B0CB3D}.Release|x86.Build.0 = Release|x86
 		{63C84321-8AA7-4E38-A778-675E07B0CB3D}.Release|x86.Deploy.0 = Release|x86
+		{75A1624F-45EB-4AE7-8E30-471382171045}.Debug|Any CPU.ActiveCfg = Debug|Any CPU
+		{75A1624F-45EB-4AE7-8E30-471382171045}.Debug|Any CPU.Build.0 = Debug|Any CPU
+		{75A1624F-45EB-4AE7-8E30-471382171045}.Debug|Any CPU.Deploy.0 = Debug|Any CPU
+		{75A1624F-45EB-4AE7-8E30-471382171045}.Debug|ARM.ActiveCfg = Debug|ARM
+		{75A1624F-45EB-4AE7-8E30-471382171045}.Debug|ARM.Build.0 = Debug|ARM
+		{75A1624F-45EB-4AE7-8E30-471382171045}.Debug|ARM.Deploy.0 = Debug|ARM
+		{75A1624F-45EB-4AE7-8E30-471382171045}.Debug|x64.ActiveCfg = Debug|x64
+		{75A1624F-45EB-4AE7-8E30-471382171045}.Debug|x64.Build.0 = Debug|x64
+		{75A1624F-45EB-4AE7-8E30-471382171045}.Debug|x64.Deploy.0 = Debug|x64
+		{75A1624F-45EB-4AE7-8E30-471382171045}.Debug|x86.ActiveCfg = Debug|x86
+		{75A1624F-45EB-4AE7-8E30-471382171045}.Debug|x86.Build.0 = Debug|x86
+		{75A1624F-45EB-4AE7-8E30-471382171045}.Debug|x86.Deploy.0 = Debug|x86
+		{75A1624F-45EB-4AE7-8E30-471382171045}.Release|Any CPU.ActiveCfg = Release|Any CPU
+		{75A1624F-45EB-4AE7-8E30-471382171045}.Release|Any CPU.Build.0 = Release|Any CPU
+		{75A1624F-45EB-4AE7-8E30-471382171045}.Release|Any CPU.Deploy.0 = Release|Any CPU
+		{75A1624F-45EB-4AE7-8E30-471382171045}.Release|ARM.ActiveCfg = Release|ARM
+		{75A1624F-45EB-4AE7-8E30-471382171045}.Release|ARM.Build.0 = Release|ARM
+		{75A1624F-45EB-4AE7-8E30-471382171045}.Release|ARM.Deploy.0 = Release|ARM
+		{75A1624F-45EB-4AE7-8E30-471382171045}.Release|x64.ActiveCfg = Release|x64
+		{75A1624F-45EB-4AE7-8E30-471382171045}.Release|x64.Build.0 = Release|x64
+		{75A1624F-45EB-4AE7-8E30-471382171045}.Release|x64.Deploy.0 = Release|x64
+		{75A1624F-45EB-4AE7-8E30-471382171045}.Release|x86.ActiveCfg = Release|x86
+		{75A1624F-45EB-4AE7-8E30-471382171045}.Release|x86.Build.0 = Release|x86
+		{75A1624F-45EB-4AE7-8E30-471382171045}.Release|x86.Deploy.0 = Release|x86
 	EndGlobalSection
 	GlobalSection(SolutionProperties) = preSolution
 		HideSolutionNode = FALSE