feat: Added a range

demo/src/app/app.routing.ts

@@ -1,12 +1,8 @@
 import { NgModule } from "@angular/core";
 import { Routes, RouterModule } from "@angular/router";
 import { GettingStartedPage } from "./pages/getting-started/getting-started.page";
-
-// Collections
 import { MessagePage } from "./pages/collections/message/message.page";
 import { PaginationPage } from "./pages/collections/pagination/pagination.page";
-
-// Modules
 import { AccordionPage } from "./pages/modules/accordion/accordion.page";
 import { CheckboxPage } from "./pages/modules/checkbox/checkbox.page";
 import { CollapsePage } from "./pages/modules/collapse/collapse.page";
@@ -16,18 +12,23 @@ import { DropdownPage } from "./pages/modules/dropdown/dropdown.page";
 import { ModalPage } from "./pages/modules/modal/modal.page";
 import { PopupPage } from "./pages/modules/popup/popup.page";
 import { ProgressPage } from "./pages/modules/progress/progress.page";
+import { RangePage } from "./pages/modules/range/range.page";
 import { RatingPage } from "./pages/modules/rating/rating.page";
 import { SearchPage } from "./pages/modules/search/search.page";
 import { SelectPage } from "./pages/modules/select/select.page";
 import { SidebarPage } from "./pages/modules/sidebar/sidebar.page";
 import { TabsPage } from "./pages/modules/tabs/tabs.page";
 import { TransitionPage } from "./pages/modules/transition/transition.page";
+import { LocalizationPage } from "./pages/behaviors/localization/localization.page";
+import { TestPage } from "./pages/development/test/test.page";
+
+// Collections
+
+// Modules
 
 // Behaviors
-import { LocalizationPage } from "./pages/behaviors/localization/localization.page";
 
 // Development
-import { TestPage } from "./pages/development/test/test.page";
 
 const appRoutes:Routes = [
     {
@@ -82,6 +83,10 @@ const appRoutes:Routes = [
         path: "modules/progress",
         component: ProgressPage
     },
+    {
+        path: "modules/range",
+        component: RangePage
+    },
     {
         path: "modules/rating",
         component: RatingPage

demo/src/app/components/sidebar/sidebar.component.html

@@ -29,6 +29,7 @@
         <a class="item" routerLink="/modules/modal" routerLinkActive="active">Modal</a>
         <a class="item" routerLink="/modules/popup" routerLinkActive="active">Popup</a>
         <a class="item" routerLink="/modules/progress" routerLinkActive="active">Progress</a>
+        <a class="item" routerLink="/modules/range" routerLinkActive="active">Range</a>
         <a class="item" routerLink="/modules/rating" routerLinkActive="active">Rating</a>
         <a class="item" routerLink="/modules/search" routerLinkActive="active">Search</a>
         <a class="item" routerLink="/modules/select" routerLinkActive="active">Select</a>
@@ -48,4 +49,4 @@
     <div class="menu">
         <a class="item" routerLink="/development/test" routerLinkActive="active">Test</a>
     </div>
-</div>
+</div>

demo/src/app/pages/demo-pages.module.ts

@@ -4,14 +4,9 @@ import { FormsModule, ReactiveFormsModule } from "@angular/forms";
 import { RouterModule } from "@angular/router";
 import { SuiModule } from "../../../../src";
 import { DemoComponentsModule } from "../components/demo-components.module";
-
 import { GettingStartedPage } from "./getting-started/getting-started.page";
-
-// Collections
 import { MessagePageComponents } from "./collections/message/message.page";
 import { PaginationPageComponents } from "./collections/pagination/pagination.page";
-
-// Modules
 import { AccordionPageComponents } from "./modules/accordion/accordion.page";
 import { CheckboxPageComponents } from "./modules/checkbox/checkbox.page";
 import { CollapsePageComponents } from "./modules/collapse/collapse.page";
@@ -21,18 +16,23 @@ import { DropdownPageComponents } from "./modules/dropdown/dropdown.page";
 import { ModalPageComponents, ConfirmModalComponent } from "./modules/modal/modal.page";
 import { PopupPageComponents } from "./modules/popup/popup.page";
 import { ProgressPageComponents } from "./modules/progress/progress.page";
+import { RangePageComponents } from "./modules/range/range.page";
 import { RatingPageComponents } from "./modules/rating/rating.page";
 import { SearchPageComponents } from "./modules/search/search.page";
 import { SelectPageComponents } from "./modules/select/select.page";
 import { SidebarPageComponents } from "./modules/sidebar/sidebar.page";
 import { TabsPageComponents } from "./modules/tabs/tabs.page";
 import { TransitionPageComponents } from "./modules/transition/transition.page";
+import { LocalizationPageComponents } from "./behaviors/localization/localization.page";
+import { TestPage } from "./development/test/test.page";
+
+// Collections
+
+// Modules
 
 // Behaviors
-import { LocalizationPageComponents } from "./behaviors/localization/localization.page";
 
 // Development
-import { TestPage } from "./development/test/test.page";
 
 @NgModule({
     imports: [
@@ -60,6 +60,7 @@ import { TestPage } from "./development/test/test.page";
         ModalPageComponents,
         PopupPageComponents,
         ProgressPageComponents,
+        RangePageComponents,
         RatingPageComponents,
         SearchPageComponents,
         SelectPageComponents,

demo/src/app/pages/modules/range/range.page.html

@@ -0,0 +1,43 @@
+<demo-page-title>
+    <div header>Rating</div>
+    <div sub-header>
+        <p>A rating indicates user interest in content</p>
+    </div>
+</demo-page-title>
+<demo-page-content>
+    <sui-message class="info" [isDismissable]="false">
+        <div class="header">Important Note</div>
+        <p>
+            The range is a port of <a href="https://github.com/tyleryasaka/semantic-ui-range">Semantic-UI-Range</a>,
+            an external module for Semantic UI. If you'd like to use the range in your app, you must include the module's
+            CSS alongside Semantic UI's.
+        </p>
+        <div class="ui segment">
+            <demo-codeblock language="markup" [src]="cssInclude"></demo-codeblock>
+        </div>
+    </sui-message>
+    <h2 class="ui dividing header">Examples</h2>
+    <demo-example [code]="exampleStandardTemplate">
+        <div info>
+            <h4 class="ui header">Range</h4>
+            <p>A basic range</p>
+        </div>
+        <example-range-standard result></example-range-standard>
+    </demo-example>
+    <demo-example [code]="exampleMinMaxTemplate">
+        <div info>
+            <h4 class="ui header">Range</h4>
+            <p>Range with min max</p>
+        </div>
+        <example-range-min-max result></example-range-min-max>
+    </demo-example>
+    <demo-example [code]="exampleStepTemplate">
+        <div info>
+            <h4 class="ui header">Range</h4>
+            <p>Range that skips 5 values with each step</p>
+        </div>
+        <example-range-step result></example-range-step>
+    </demo-example>
+    <h2 id="api" class="ui dividing header">API</h2>
+    <demo-api [api]="api"></demo-api>
+</demo-page-content>

demo/src/app/pages/modules/range/range.page.ts

@@ -0,0 +1,149 @@
+import { Component } from "@angular/core";
+import { ApiDefinition } from "../../../components/api/api.component";
+
+const exampleStandardTemplate = `
+<div class="ui form">
+    <div class="field">
+        <label>Range</label>
+        <sui-range [(value)]="value" [isReadonly]="readonly"></sui-range>
+    </div>
+    <div class="field">
+        <label>Value</label>
+        <div class="ui action input">
+            <input type="number" [(ngModel)]="value">
+
+            <button class="ui green icon button" (click)="value = value + 10">
+                <i class="plus icon"></i>
+            </button>
+            <button class="ui red icon button" (click)="value = value - 10">
+                <i class="minus icon"></i>
+            </button>
+        </div>
+    </div>
+    <div class="field">
+        <sui-checkbox [(ngModel)]="readonly">Read Only?</sui-checkbox>
+    </div>
+</div>
+`;
+
+const exampleMinMaxTemplate = `
+<div class="ui form">
+    <div class="field">
+        <label>Range with max value of 42 and min value of 11</label>
+        <sui-range [(value)]="value" [max]="42" [min]="11"></sui-range>
+    </div>
+    <div class="field">
+        <label>Value</label>
+        <div class="ui action input">
+            <input type="number" [(ngModel)]="value">
+
+            <button class="ui green icon button" (click)="value = value + 10">
+                <i class="plus icon"></i>
+            </button>
+            <button class="ui red icon button" (click)="value = value - 10">
+                <i class="minus icon"></i>
+            </button>
+        </div>
+    </div>
+</div>
+`;
+
+const exampleStepTemplate = `
+<div class="ui form">
+    <div class="field">
+        <label>Range that skips 5 values each step</label>
+        <sui-range [(value)]="value" [step]="5"></sui-range>
+    </div>
+    <div class="field">
+        <label>Value</label>
+        <div class="ui action input">
+            <input type="number" [(ngModel)]="value">
+
+            <button class="ui green icon button" (click)="value = value + 10">
+                <i class="plus icon"></i>
+            </button>
+            <button class="ui red icon button" (click)="value = value - 10">
+                <i class="minus icon"></i>
+            </button>
+        </div>
+    </div>
+</div>
+`;
+
+@Component({
+    selector: "demo-page-range",
+    templateUrl: "./range.page.html"
+})
+export class RangePage {
+    public api:ApiDefinition = [
+        {
+            selector: "<sui-range>",
+            properties: [
+                {
+                    name: "min",
+                    type: "number",
+                    description: "The minimum value of the range.",
+                    defaultValue: "0"
+                },
+                {
+                    name: "max",
+                    type: "number",
+                    description: "The maximum value of the range.",
+                    defaultValue: "100"
+                },
+                {
+                    name: "step",
+                    type: "number",
+                    description: "The amount each step skips in value, for step 2 the value will skip like so: 0, 2, 4...",
+                    defaultValue: "100"
+                },
+                {
+                    name: "isReadonly",
+                    type: "boolean",
+                    description: "Sets whether or not the value is read-only. ",
+                    defaultValue: "false"
+                }
+            ],
+            events: [
+                {
+                    name: "valueChange",
+                    type: "number",
+                    description: "Fires whenever the value value is changed."
+                }
+            ]
+        }
+    ];
+    public exampleStandardTemplate:string = exampleStandardTemplate;
+    public exampleMinMaxTemplate:string = exampleMinMaxTemplate;
+    public exampleStepTemplate:string = exampleStepTemplate;
+    public cssInclude:string = `<link rel="stylesheet" href="https://unpkg.com/[email protected]/range.css">`;
+}
+
+@Component({
+    selector: "example-range-standard",
+    template: exampleStandardTemplate
+})
+export class RangeExampleStandard {
+    public value:number = 3;
+    public readonly:boolean;
+}
+
+@Component({
+    selector: "example-range-min-max",
+    template: exampleMinMaxTemplate
+})
+export class RangeExampleMinMax {
+    public value:number = 3;
+    public readonly:boolean;
+}
+
+@Component({
+    selector: "example-range-step",
+    template: exampleStepTemplate
+})
+export class RangeExampleStep {
+    public value:number = 5;
+    public readonly:boolean;
+}
+
+export const RangePageComponents = [RangePage, RangeExampleStandard, RangeExampleMinMax, RangeExampleStep];

demo/src/index.html

@@ -15,6 +15,8 @@
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.2.9/semantic.min.css">
     <!-- Calendar Module CSS -->
     <link rel="stylesheet" href="https://unpkg.com/semantic-ui-calendar/dist/calendar.min.css">
+    <!-- Range Module CSS -->
+    <link rel="stylesheet" href="https://unpkg.com/[email protected]/range.css">
 
     <script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.5.1/prism.min.js"></script>
     <script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.5.1/components/prism-bash.min.js"></script>

src/modules/index.ts

@@ -7,6 +7,7 @@ export * from "./dropdown";
 export * from "./modal";
 export * from "./popup";
 export * from "./progress";
+export * from "./range";
 export * from "./rating";
 export * from "./search";
 export * from "./select";