From 3accd90d51c78e1550d2c8b3c6ee8d9bf3174032 Mon Sep 17 00:00:00 2001
From: Abhishek <abhishekbanthia@me.com>
Date: Mon, 7 Sep 2020 23:19:13 -0500
Subject: [PATCH] Modern Slider.

---
 Clocker/Clocker.xcodeproj/project.pbxproj | 11 +++
 Clocker/Clocker/en.lproj/Panel.xib        | 91 +++++++++++++++++------
 Clocker/Panel/ParentPanelController.swift | 27 +++++++
 Clocker/Panel/UI/HourMarkerViewItem.swift | 15 ++++
 Clocker/Panel/UI/HourMarkerViewItem.xib   | 51 +++++++++++++
 5 files changed, 173 insertions(+), 22 deletions(-)
 create mode 100644 Clocker/Panel/UI/HourMarkerViewItem.swift
 create mode 100644 Clocker/Panel/UI/HourMarkerViewItem.xib

diff --git a/Clocker/Clocker.xcodeproj/project.pbxproj b/Clocker/Clocker.xcodeproj/project.pbxproj
index 3f3dcf3..5bd4fdd 100755
--- a/Clocker/Clocker.xcodeproj/project.pbxproj
+++ b/Clocker/Clocker.xcodeproj/project.pbxproj
@@ -7,6 +7,8 @@
 	objects = {
 
 /* Begin PBXBuildFile section */
+		357391872507277500D30819 /* HourMarkerViewItem.swift in Sources */ = {isa = PBXBuildFile; fileRef = 357391852507277500D30819 /* HourMarkerViewItem.swift */; };
+		357391882507277500D30819 /* HourMarkerViewItem.xib in Resources */ = {isa = PBXBuildFile; fileRef = 357391862507277500D30819 /* HourMarkerViewItem.xib */; };
 		3595FAD0227F88BC0044A12A /* UserDefaults + KVOExtensions.swift in Sources */ = {isa = PBXBuildFile; fileRef = 3595FACF227F88BC0044A12A /* UserDefaults + KVOExtensions.swift */; };
 		35C11E2124873A550031F18C /* VersionUpdateHandler.swift in Sources */ = {isa = PBXBuildFile; fileRef = 35C11E2024873A550031F18C /* VersionUpdateHandler.swift */; };
 		35C36EE422595EFD002FA5C6 /* StatusContainerView.swift in Sources */ = {isa = PBXBuildFile; fileRef = 35C36EE022595EFD002FA5C6 /* StatusContainerView.swift */; };
@@ -225,6 +227,8 @@
 		352AF497232E07B400D96FA7 /* hi */ = {isa = PBXFileReference; lastKnownFileType = text.plist.strings; name = hi; path = hi.lproj/InfoPlist.strings; sourceTree = "<group>"; };
 		352AF499232E07B400D96FA7 /* hi */ = {isa = PBXFileReference; lastKnownFileType = text.plist.strings; name = hi; path = hi.lproj/Localizable.strings; sourceTree = "<group>"; };
 		3545C52A22612BCC00121E25 /* RateTests.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = RateTests.swift; sourceTree = "<group>"; };
+		357391852507277500D30819 /* HourMarkerViewItem.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = HourMarkerViewItem.swift; sourceTree = "<group>"; };
+		357391862507277500D30819 /* HourMarkerViewItem.xib */ = {isa = PBXFileReference; lastKnownFileType = file.xib; path = HourMarkerViewItem.xib; sourceTree = "<group>"; };
 		3595FACF227F88BC0044A12A /* UserDefaults + KVOExtensions.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = "UserDefaults + KVOExtensions.swift"; sourceTree = "<group>"; };
 		35C11E2024873A550031F18C /* VersionUpdateHandler.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = VersionUpdateHandler.swift; sourceTree = "<group>"; };
 		35C36EE022595EFD002FA5C6 /* StatusContainerView.swift */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = sourcecode.swift; path = StatusContainerView.swift; sourceTree = "<group>"; };
@@ -602,6 +606,8 @@
 				35C36F552259DD8A002FA5C6 /* TimezoneCellView.swift */,
 				35C36F532259DD8A002FA5C6 /* TimezoneDataSource.swift */,
 				35C36F322259D7C3002FA5C6 /* AddTableViewCell.swift */,
+				357391852507277500D30819 /* HourMarkerViewItem.swift */,
+				357391862507277500D30819 /* HourMarkerViewItem.xib */,
 			);
 			path = UI;
 			sourceTree = "<group>";
@@ -1107,6 +1113,7 @@
 			buildActionMask = 2147483647;
 			files = (
 				9A13BAEA1CA88A76007C6CBE /* Localizable.strings in Resources */,
+				357391882507277500D30819 /* HourMarkerViewItem.xib in Resources */,
 				9AB6F15E2259D08300A44663 /* iVersion.bundle in Resources */,
 				35C36F972259EBB1002FA5C6 /* AppFeedbackWindow.xib in Resources */,
 				9A13BAE01CA882FA007C6CBE /* InfoPlist.strings in Resources */,
@@ -1212,6 +1219,7 @@
 				35C36EE622595EFD002FA5C6 /* StatusItemView.swift in Sources */,
 				35C36FA12259ED6D002FA5C6 /* EventCenter.swift in Sources */,
 				9A5951BD1C1D0A8D009C17AA /* CommonStrings.m in Sources */,
+				357391872507277500D30819 /* HourMarkerViewItem.swift in Sources */,
 				35C36EE422595EFD002FA5C6 /* StatusContainerView.swift in Sources */,
 				35C36F782259E1D0002FA5C6 /* Foundation + Additions.swift in Sources */,
 				35C36F16225961DA002FA5C6 /* Date+Inits.swift in Sources */,
@@ -1439,6 +1447,7 @@
 		9A5B1A8C1BECDB5B00A77C68 /* Distribution */ = {
 			isa = XCBuildConfiguration;
 			buildSettings = {
+				ARCHS = "$(NATIVE_ARCH_ACTUAL)";
 				ASSETCATALOG_COMPILER_APPICON_NAME = AppIcon;
 				ASSETCATALOG_COMPILER_GLOBAL_ACCENT_COLOR_NAME = "Accent Color";
 				CLANG_ENABLE_MODULES = YES;
@@ -1925,6 +1934,7 @@
 		DD4F7C2313C30F9F00825C6E /* Debug */ = {
 			isa = XCBuildConfiguration;
 			buildSettings = {
+				ARCHS = "$(NATIVE_ARCH_ACTUAL)";
 				ASSETCATALOG_COMPILER_APPICON_NAME = AppIcon;
 				ASSETCATALOG_COMPILER_GLOBAL_ACCENT_COLOR_NAME = "Accent Color";
 				CLANG_ENABLE_MODULES = YES;
@@ -1989,6 +1999,7 @@
 		DD4F7C2413C30F9F00825C6E /* Release */ = {
 			isa = XCBuildConfiguration;
 			buildSettings = {
+				ARCHS = "$(NATIVE_ARCH_ACTUAL)";
 				ASSETCATALOG_COMPILER_APPICON_NAME = AppIcon;
 				ASSETCATALOG_COMPILER_GLOBAL_ACCENT_COLOR_NAME = "Accent Color";
 				CLANG_ENABLE_MODULES = YES;
diff --git a/Clocker/Clocker/en.lproj/Panel.xib b/Clocker/Clocker/en.lproj/Panel.xib
index 670ded6..38aaacf 100755
--- a/Clocker/Clocker/en.lproj/Panel.xib
+++ b/Clocker/Clocker/en.lproj/Panel.xib
@@ -1,8 +1,8 @@
 <?xml version="1.0" encoding="UTF-8"?>
-<document type="com.apple.InterfaceBuilder3.Cocoa.XIB" version="3.0" toolsVersion="17132" targetRuntime="MacOSX.Cocoa" propertyAccessControl="none" useAutolayout="YES">
+<document type="com.apple.InterfaceBuilder3.Cocoa.XIB" version="3.0" toolsVersion="17154" targetRuntime="MacOSX.Cocoa" propertyAccessControl="none" useAutolayout="YES">
     <dependencies>
         <deployment identifier="macosx"/>
-        <plugIn identifier="com.apple.InterfaceBuilder.CocoaPlugin" version="17132"/>
+        <plugIn identifier="com.apple.InterfaceBuilder.CocoaPlugin" version="17154"/>
         <capability name="documents saved in the Xcode 8 format" minToolsVersion="8.0"/>
     </dependencies>
     <objects>
@@ -16,6 +16,7 @@
                 <outlet property="leftButton" destination="WVY-D9-AAX" id="M2W-xG-chN"/>
                 <outlet property="leftField" destination="8Qj-Y9-Okf" id="q3N-ht-jCd"/>
                 <outlet property="mainTableView" destination="dFw-ts-8OZ" id="2kY-dd-rDV"/>
+                <outlet property="modernSlider" destination="WXe-YT-bXl" id="vx0-FO-fKA"/>
                 <outlet property="nextEventLabel" destination="rld-Ag-KL1" id="GTY-j3-A1g"/>
                 <outlet property="pinButton" destination="YXE-4J-5cn" id="k6V-HK-7XG"/>
                 <outlet property="preferencesButton" destination="Ctq-BV-GPN" id="cdL-5h-qmx"/>
@@ -40,20 +41,20 @@
             <rect key="contentRect" x="1000" y="379" width="350" height="460"/>
             <rect key="screenRect" x="0.0" y="0.0" width="1680" height="1025"/>
             <view key="contentView" focusRingType="none" id="6" customClass="BackgroundPanelView" customModule="Clocker" customModuleProvider="target">
-                <rect key="frame" x="0.0" y="0.0" width="350" height="460"/>
+                <rect key="frame" x="0.0" y="0.0" width="350" height="510"/>
                 <autoresizingMask key="autoresizingMask" widthSizable="YES" heightSizable="YES"/>
                 <subviews>
                     <stackView focusRingType="none" distribution="fill" orientation="vertical" alignment="leading" spacing="0.0" horizontalStackHuggingPriority="249.99998474121094" verticalStackHuggingPriority="249.99998474121094" detachesHiddenViews="YES" translatesAutoresizingMaskIntoConstraints="NO" id="OZA-6o-SbE">
-                        <rect key="frame" x="0.0" y="0.0" width="350" height="460"/>
+                        <rect key="frame" x="0.0" y="0.0" width="350" height="510"/>
                         <subviews>
                             <scrollView focusRingType="none" borderType="none" autohidesScrollers="YES" horizontalLineScroll="96" horizontalPageScroll="1" verticalLineScroll="96" verticalPageScroll="1" hasHorizontalScroller="NO" usesPredominantAxisScrolling="NO" scrollerKnobStyle="light" translatesAutoresizingMaskIntoConstraints="NO" id="4Gd-Nv-fXr">
-                                <rect key="frame" x="-20" y="195" width="370" height="265"/>
+                                <rect key="frame" x="-29" y="245" width="379" height="265"/>
                                 <clipView key="contentView" focusRingType="none" drawsBackground="NO" copiesOnScroll="NO" id="4MZ-Di-yNR">
-                                    <rect key="frame" x="0.0" y="0.0" width="370" height="265"/>
+                                    <rect key="frame" x="0.0" y="0.0" width="379" height="265"/>
                                     <autoresizingMask key="autoresizingMask" widthSizable="YES" heightSizable="YES"/>
                                     <subviews>
                                         <tableView focusRingType="none" verticalHuggingPriority="750" allowsExpansionToolTips="YES" columnAutoresizingStyle="lastColumnOnly" columnSelection="YES" multipleSelection="NO" autosaveColumns="NO" rowHeight="95" viewBased="YES" id="dFw-ts-8OZ" customClass="PanelTableView" customModule="Clocker" customModuleProvider="target">
-                                            <rect key="frame" x="0.0" y="0.0" width="370" height="265"/>
+                                            <rect key="frame" x="0.0" y="0.0" width="379" height="265"/>
                                             <autoresizingMask key="autoresizingMask" widthSizable="YES" heightSizable="YES"/>
                                             <size key="intercellSpacing" width="3" height="1"/>
                                             <color key="backgroundColor" name="controlBackgroundColor" catalog="System" colorSpace="catalog"/>
@@ -72,11 +73,11 @@
                                                     <tableColumnResizingMask key="resizingMask" resizeWithTable="YES" userResizable="YES"/>
                                                     <prototypeCellViews>
                                                         <tableCellView identifier="timeZoneCell" id="qbN-ba-fho" customClass="TimezoneCellView" customModule="Clocker" customModuleProvider="target">
-                                                            <rect key="frame" x="11" y="0.0" width="347" height="111"/>
+                                                            <rect key="frame" x="1" y="0.0" width="338" height="111"/>
                                                             <autoresizingMask key="autoresizingMask" widthSizable="YES" heightSizable="YES"/>
                                                             <subviews>
                                                                 <textField verticalHuggingPriority="750" verticalCompressionResistancePriority="749" tag="102" preferredMaxLayoutWidth="72" textCompletion="NO" translatesAutoresizingMaskIntoConstraints="NO" id="QUd-7D-q14">
-                                                                    <rect key="frame" x="28" y="50" width="189" height="22"/>
+                                                                    <rect key="frame" x="28" y="50" width="180" height="22"/>
                                                                     <constraints>
                                                                         <constraint firstAttribute="height" constant="22" identifier="relative-day-height" id="JkG-8f-zhJ"/>
                                                                     </constraints>
@@ -87,7 +88,7 @@
                                                                     </textFieldCell>
                                                                 </textField>
                                                                 <textField horizontalHuggingPriority="251" verticalHuggingPriority="750" tag="101" preferredMaxLayoutWidth="110" textCompletion="NO" translatesAutoresizingMaskIntoConstraints="NO" id="vnv-J2-7r1">
-                                                                    <rect key="frame" x="215" y="67" width="114" height="35"/>
+                                                                    <rect key="frame" x="206" y="67" width="114" height="35"/>
                                                                     <constraints>
                                                                         <constraint firstAttribute="height" constant="35" identifier="height" id="Bwf-I6-2Pc"/>
                                                                         <constraint firstAttribute="width" relation="greaterThanOrEqual" constant="110" id="cQV-gJ-zMz"/>
@@ -99,7 +100,7 @@
                                                                     </textFieldCell>
                                                                 </textField>
                                                                 <textField verticalHuggingPriority="750" preferredMaxLayoutWidth="50" textCompletion="NO" translatesAutoresizingMaskIntoConstraints="NO" id="uOg-ij-alO">
-                                                                    <rect key="frame" x="245" y="49" width="84" height="20"/>
+                                                                    <rect key="frame" x="236" y="49" width="84" height="20"/>
                                                                     <constraints>
                                                                         <constraint firstAttribute="height" constant="20" id="89H-r0-Dnh"/>
                                                                         <constraint firstAttribute="width" constant="80" identifier="width" id="8KH-Ks-d4T"/>
@@ -111,7 +112,7 @@
                                                                     </textFieldCell>
                                                                 </textField>
                                                                 <textField horizontalHuggingPriority="251" verticalHuggingPriority="750" translatesAutoresizingMaskIntoConstraints="NO" id="6At-J8-gzZ">
-                                                                    <rect key="frame" x="28" y="0.0" width="319" height="22"/>
+                                                                    <rect key="frame" x="28" y="0.0" width="310" height="22"/>
                                                                     <constraints>
                                                                         <constraint firstAttribute="height" constant="22" id="eYP-TP-f1a"/>
                                                                     </constraints>
@@ -122,7 +123,7 @@
                                                                     </textFieldCell>
                                                                 </textField>
                                                                 <imageView horizontalHuggingPriority="251" verticalHuggingPriority="251" translatesAutoresizingMaskIntoConstraints="NO" id="sML-fJ-nbv">
-                                                                    <rect key="frame" x="225" y="49" width="20" height="20"/>
+                                                                    <rect key="frame" x="216" y="49" width="20" height="20"/>
                                                                     <constraints>
                                                                         <constraint firstAttribute="height" constant="20" id="2NE-mf-cN5"/>
                                                                         <constraint firstAttribute="width" constant="20" id="EXa-Tf-sR6"/>
@@ -130,7 +131,7 @@
                                                                     <imageCell key="cell" refusesFirstResponder="YES" alignment="left" imageAlignment="right" imageScaling="proportionallyDown" id="cfP-C4-ENJ"/>
                                                                 </imageView>
                                                                 <textField verticalHuggingPriority="751" horizontalCompressionResistancePriority="250" verticalCompressionResistancePriority="751" tag="100" preferredMaxLayoutWidth="150" textCompletion="NO" translatesAutoresizingMaskIntoConstraints="NO" id="etF-33-bCB">
-                                                                    <rect key="frame" x="28" y="79" width="181" height="20"/>
+                                                                    <rect key="frame" x="28" y="79" width="172" height="20"/>
                                                                     <textFieldCell key="cell" lineBreakMode="truncatingTail" placeholderString="Timezone Name" id="rnh-AP-ooc">
                                                                         <font key="font" size="15" name="Avenir-Light"/>
                                                                         <color key="textColor" name="controlTextColor" catalog="System" colorSpace="catalog"/>
@@ -208,11 +209,11 @@
                                                             </connections>
                                                         </tableCellView>
                                                         <tableCellView identifier="addCell" id="rb3-TW-xSb" customClass="AddTableViewCell" customModule="Clocker" customModuleProvider="target">
-                                                            <rect key="frame" x="11" y="112" width="347" height="100"/>
+                                                            <rect key="frame" x="1" y="112" width="338" height="100"/>
                                                             <autoresizingMask key="autoresizingMask" widthSizable="YES" heightSizable="YES"/>
                                                             <subviews>
                                                                 <button verticalHuggingPriority="750" translatesAutoresizingMaskIntoConstraints="NO" id="AzA-5G-LR7">
-                                                                    <rect key="frame" x="134" y="10" width="80" height="80"/>
+                                                                    <rect key="frame" x="129" y="10" width="80" height="80"/>
                                                                     <constraints>
                                                                         <constraint firstAttribute="height" constant="80" id="bRv-Of-5l3"/>
                                                                         <constraint firstAttribute="width" constant="80" id="cRC-Fx-WLR"/>
@@ -257,7 +258,7 @@
                                 </scroller>
                             </scrollView>
                             <customView identifier="Review Cell" focusRingType="none" translatesAutoresizingMaskIntoConstraints="NO" id="TDn-Kk-KkV">
-                                <rect key="frame" x="0.0" y="145" width="350" height="50"/>
+                                <rect key="frame" x="0.0" y="195" width="350" height="50"/>
                                 <subviews>
                                     <stackView focusRingType="none" distribution="fill" orientation="horizontal" alignment="centerY" horizontalStackHuggingPriority="249.99998474121094" verticalStackHuggingPriority="249.99998474121094" detachesHiddenViews="YES" translatesAutoresizingMaskIntoConstraints="NO" id="uys-ww-duA">
                                         <rect key="frame" x="25" y="25" width="300" height="20"/>
@@ -331,7 +332,7 @@
                                 <accessibility description="ReviewCell" identifier="ReviewCell"/>
                             </customView>
                             <customView wantsLayer="YES" translatesAutoresizingMaskIntoConstraints="NO" id="Akn-cR-W4G" customClass="ReviewView" customModule="Clocker" customModuleProvider="target">
-                                <rect key="frame" x="0.0" y="70" width="350" height="75"/>
+                                <rect key="frame" x="0.0" y="120" width="350" height="75"/>
                                 <subviews>
                                     <customView translatesAutoresizingMaskIntoConstraints="NO" id="Etf-aa-udM" customClass="ClockerTextBackgroundView" customModule="Clocker" customModuleProvider="target">
                                         <rect key="frame" x="10" y="10" width="330" height="55"/>
@@ -408,10 +409,10 @@
                                 <accessibility identifier="UpcomingEventView"/>
                             </customView>
                             <customView wantsLayer="YES" focusRingType="none" translatesAutoresizingMaskIntoConstraints="NO" id="C7R-Dq-MFr" userLabel="Slider View">
-                                <rect key="frame" x="0.0" y="40" width="350" height="30"/>
+                                <rect key="frame" x="0.0" y="90" width="350" height="30"/>
                                 <subviews>
                                     <datePicker focusRingType="none" verticalHuggingPriority="750" translatesAutoresizingMaskIntoConstraints="NO" id="zN8-JF-j7O">
-                                        <rect key="frame" x="203" y="0.0" width="137" height="23"/>
+                                        <rect key="frame" x="203" y="14" width="137" height="23"/>
                                         <datePickerCell key="cell" focusRingType="none" alignment="left" drawsBackground="NO" datePickerStyle="textField" id="Zg1-OT-OMw">
                                             <font key="font" size="13" name="Avenir-Roman"/>
                                             <date key="date" timeIntervalSinceReferenceDate="-595929600">
@@ -426,7 +427,7 @@
                                         </connections>
                                     </datePicker>
                                     <slider verticalHuggingPriority="750" translatesAutoresizingMaskIntoConstraints="NO" id="Vf2-uI-yf3">
-                                        <rect key="frame" x="7" y="2" width="196" height="23"/>
+                                        <rect key="frame" x="7" y="6" width="196" height="19"/>
                                         <constraints>
                                             <constraint firstAttribute="height" constant="15" id="cS7-i2-mHU"/>
                                         </constraints>
@@ -445,6 +446,50 @@
                                     <constraint firstAttribute="trailing" secondItem="zN8-JF-j7O" secondAttribute="trailing" constant="10" id="ci5-6v-klf"/>
                                 </constraints>
                             </customView>
+                            <customView wantsLayer="YES" focusRingType="none" translatesAutoresizingMaskIntoConstraints="NO" id="LOl-EQ-xe8" userLabel="Slider v2 View">
+                                <rect key="frame" x="0.0" y="40" width="350" height="50"/>
+                                <subviews>
+                                    <scrollView wantsLayer="YES" borderType="none" horizontalLineScroll="10" horizontalPageScroll="10" verticalLineScroll="10" verticalPageScroll="10" hasHorizontalScroller="NO" hasVerticalScroller="NO" usesPredominantAxisScrolling="NO" translatesAutoresizingMaskIntoConstraints="NO" id="IvD-gH-GZs">
+                                        <rect key="frame" x="0.0" y="0.0" width="350" height="50"/>
+                                        <clipView key="contentView" id="far-v7-aSO">
+                                            <rect key="frame" x="0.0" y="0.0" width="350" height="50"/>
+                                            <autoresizingMask key="autoresizingMask" widthSizable="YES" heightSizable="YES"/>
+                                            <subviews>
+                                                <collectionView selectable="YES" allowsEmptySelection="NO" id="WXe-YT-bXl">
+                                                    <rect key="frame" x="0.0" y="0.0" width="350" height="158"/>
+                                                    <autoresizingMask key="autoresizingMask" widthSizable="YES"/>
+                                                    <collectionViewFlowLayout key="collectionViewLayout" minimumInteritemSpacing="10" minimumLineSpacing="10" scrollDirection="horizontal" id="tAZ-IB-sLl">
+                                                        <size key="itemSize" width="50" height="50"/>
+                                                    </collectionViewFlowLayout>
+                                                    <color key="primaryBackgroundColor" name="controlBackgroundColor" catalog="System" colorSpace="catalog"/>
+                                                    <connections>
+                                                        <outlet property="dataSource" destination="-2" id="0gk-DW-B1O"/>
+                                                        <outlet property="delegate" destination="-2" id="eqG-gz-HWM"/>
+                                                    </connections>
+                                                </collectionView>
+                                            </subviews>
+                                        </clipView>
+                                        <constraints>
+                                            <constraint firstAttribute="width" constant="350" id="F8F-tA-LdS"/>
+                                        </constraints>
+                                        <scroller key="horizontalScroller" hidden="YES" wantsLayer="YES" verticalHuggingPriority="750" horizontal="YES" id="SV5-OX-bPh">
+                                            <rect key="frame" x="-100" y="-100" width="200" height="16"/>
+                                            <autoresizingMask key="autoresizingMask"/>
+                                        </scroller>
+                                        <scroller key="verticalScroller" hidden="YES" wantsLayer="YES" verticalHuggingPriority="750" horizontal="NO" id="eqF-w8-38V">
+                                            <rect key="frame" x="-100" y="-100" width="16" height="50"/>
+                                            <autoresizingMask key="autoresizingMask"/>
+                                        </scroller>
+                                    </scrollView>
+                                </subviews>
+                                <constraints>
+                                    <constraint firstAttribute="width" constant="350" id="TTG-1H-Jlp"/>
+                                    <constraint firstItem="IvD-gH-GZs" firstAttribute="top" secondItem="LOl-EQ-xe8" secondAttribute="top" id="eP9-LU-wVB"/>
+                                    <constraint firstItem="IvD-gH-GZs" firstAttribute="leading" secondItem="LOl-EQ-xe8" secondAttribute="leading" id="eov-OB-d8G"/>
+                                    <constraint firstAttribute="bottom" secondItem="IvD-gH-GZs" secondAttribute="bottom" id="fhV-ZB-ZxV"/>
+                                    <constraint firstAttribute="height" constant="50" id="oud-UV-dC8"/>
+                                </constraints>
+                            </customView>
                             <customView wantsLayer="YES" focusRingType="none" translatesAutoresizingMaskIntoConstraints="NO" id="B8X-sx-cjT">
                                 <rect key="frame" x="0.0" y="0.0" width="350" height="40"/>
                                 <subviews>
@@ -540,6 +585,7 @@
                             <integer value="1000"/>
                             <integer value="1000"/>
                             <integer value="1000"/>
+                            <integer value="1000"/>
                         </visibilityPriorities>
                         <customSpacing>
                             <real value="3.4028234663852886e+38"/>
@@ -547,6 +593,7 @@
                             <real value="3.4028234663852886e+38"/>
                             <real value="3.4028234663852886e+38"/>
                             <real value="3.4028234663852886e+38"/>
+                            <real value="3.4028234663852886e+38"/>
                         </customSpacing>
                     </stackView>
                 </subviews>
@@ -570,7 +617,7 @@
         <image name="CurrentLocation" width="350" height="350"/>
         <image name="Extra" width="700" height="700"/>
         <image name="Float-White" width="15" height="13"/>
-        <image name="NSActionTemplate" width="17" height="15"/>
+        <image name="NSActionTemplate" width="15" height="15"/>
         <image name="PowerIcon" width="350" height="350"/>
         <image name="Remove" width="700" height="700"/>
         <image name="SharingDarkIcon" width="19" height="22"/>
diff --git a/Clocker/Panel/ParentPanelController.swift b/Clocker/Panel/ParentPanelController.swift
index 486291d..c78bff0 100644
--- a/Clocker/Panel/ParentPanelController.swift
+++ b/Clocker/Panel/ParentPanelController.swift
@@ -83,6 +83,8 @@ class ParentPanelController: NSWindowController {
 
     @IBOutlet var debugVersionView: NSView!
 
+    @IBOutlet var modernSlider: NSCollectionView!
+
     var defaultPreferences: [Data] {
         return DataStore.shared().timezones()
     }
@@ -172,6 +174,9 @@ class ParentPanelController: NSWindowController {
 //                mainTableView.style = .fullWidth
 //            }
 //        #endif
+
+        modernSlider.enclosingScrollView?.scrollerInsets = NSEdgeInsets(top: 0, left: 0, bottom: 100, right: 0)
+        modernSlider.delegate = self
     }
 
     private func showDebugVersionViewIfNeccesary() {
@@ -1010,3 +1015,25 @@ extension ParentPanelController: NSSharingServicePickerDelegate {
         return self as? NSSharingServiceDelegate
     }
 }
+
+extension ParentPanelController: NSCollectionViewDataSource, NSCollectionViewDelegate {
+    static let markerUserIdentifier = "HourMarkerViewItem"
+
+    func collectionView(_: NSCollectionView, numberOfItemsInSection _: Int) -> Int {
+        return 24
+    }
+
+    func collectionView(_ collectionView: NSCollectionView, itemForRepresentedObjectAt indexPath: IndexPath) -> NSCollectionViewItem {
+        let item = collectionView.makeItem(withIdentifier: NSUserInterfaceItemIdentifier(ParentPanelController.markerUserIdentifier), for: indexPath) as! HourMarkerViewItem
+        item.setup(with: indexPath)
+        return item
+    }
+
+    func collectionView(_: NSCollectionView, willDisplay _: NSCollectionViewItem, forRepresentedObjectAt indexPath: IndexPath) {
+        Swift.print("Will Display Item at \(indexPath.item)")
+    }
+
+    func collectionView(_: NSCollectionView, didSelectItemsAt indexPaths: Set<IndexPath>) {
+        Swift.print("Did Select Item at \(indexPaths.description)")
+    }
+}
diff --git a/Clocker/Panel/UI/HourMarkerViewItem.swift b/Clocker/Panel/UI/HourMarkerViewItem.swift
new file mode 100644
index 0000000..8e8df43
--- /dev/null
+++ b/Clocker/Panel/UI/HourMarkerViewItem.swift
@@ -0,0 +1,15 @@
+// Copyright © 2015 Abhishek Banthia
+
+import Cocoa
+
+class HourMarkerViewItem: NSCollectionViewItem {
+    @IBOutlet var hourLabel: NSTextField!
+
+    func setup(with indexPath: IndexPath) {
+        hourLabel.stringValue = "\(indexPath.item):00"
+        if indexPath.item == 2 {
+            highlightState = .forSelection
+            isSelected = true
+        }
+    }
+}
diff --git a/Clocker/Panel/UI/HourMarkerViewItem.xib b/Clocker/Panel/UI/HourMarkerViewItem.xib
new file mode 100644
index 0000000..2c1f173
--- /dev/null
+++ b/Clocker/Panel/UI/HourMarkerViewItem.xib
@@ -0,0 +1,51 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<document type="com.apple.InterfaceBuilder3.Cocoa.XIB" version="3.0" toolsVersion="17154" targetRuntime="MacOSX.Cocoa" propertyAccessControl="none" useAutolayout="YES" customObjectInstantitationMethod="direct">
+    <dependencies>
+        <deployment identifier="macosx"/>
+        <plugIn identifier="com.apple.InterfaceBuilder.CocoaPlugin" version="17154"/>
+        <capability name="documents saved in the Xcode 8 format" minToolsVersion="8.0"/>
+    </dependencies>
+    <objects>
+        <customObject id="-2" userLabel="File's Owner" customClass="HourMarkerViewItem" customModule="Clocker" customModuleProvider="target">
+            <connections>
+                <outlet property="view" destination="Hz6-mo-xeY" id="0bl-1N-x8E"/>
+            </connections>
+        </customObject>
+        <customObject id="-1" userLabel="First Responder" customClass="FirstResponder"/>
+        <customObject id="-3" userLabel="Application" customClass="NSObject"/>
+        <customView id="Hz6-mo-xeY">
+            <rect key="frame" x="0.0" y="0.0" width="181" height="103"/>
+            <autoresizingMask key="autoresizingMask" flexibleMaxX="YES" flexibleMinY="YES"/>
+            <subviews>
+                <box horizontalHuggingPriority="750" boxType="separator" translatesAutoresizingMaskIntoConstraints="NO" id="1AP-TS-SAk">
+                    <rect key="frame" x="86" y="23" width="9" height="80"/>
+                    <constraints>
+                        <constraint firstAttribute="width" constant="5" id="DvW-Pd-tOA"/>
+                    </constraints>
+                </box>
+                <textField horizontalHuggingPriority="251" verticalHuggingPriority="750" translatesAutoresizingMaskIntoConstraints="NO" id="loc-Ga-aDA">
+                    <rect key="frame" x="76" y="0.0" width="30" height="18"/>
+                    <textFieldCell key="cell" lineBreakMode="clipping" title="8:00" id="x1W-QM-ton">
+                        <font key="font" size="13" name="Avenir-Book"/>
+                        <color key="textColor" name="labelColor" catalog="System" colorSpace="catalog"/>
+                        <color key="backgroundColor" name="textBackgroundColor" catalog="System" colorSpace="catalog"/>
+                    </textFieldCell>
+                </textField>
+            </subviews>
+            <constraints>
+                <constraint firstItem="1AP-TS-SAk" firstAttribute="centerX" secondItem="Hz6-mo-xeY" secondAttribute="centerX" id="Ki4-9N-cRe"/>
+                <constraint firstAttribute="bottom" secondItem="loc-Ga-aDA" secondAttribute="bottom" id="cf2-W7-MIg"/>
+                <constraint firstItem="loc-Ga-aDA" firstAttribute="centerX" secondItem="Hz6-mo-xeY" secondAttribute="centerX" id="jdj-qX-jCt"/>
+                <constraint firstItem="1AP-TS-SAk" firstAttribute="top" secondItem="Hz6-mo-xeY" secondAttribute="top" id="s8k-hS-sHN"/>
+                <constraint firstItem="loc-Ga-aDA" firstAttribute="top" secondItem="1AP-TS-SAk" secondAttribute="bottom" constant="5" id="sDM-Xa-ZS4"/>
+            </constraints>
+            <point key="canvasLocation" x="-17.5" y="283"/>
+        </customView>
+        <customObject id="p0M-E4-898" customClass="HourMarkerViewItem" customModule="Clocker" customModuleProvider="target">
+            <connections>
+                <outlet property="hourLabel" destination="loc-Ga-aDA" id="ZFf-u1-jVN"/>
+                <outlet property="view" destination="Hz6-mo-xeY" id="9S0-wg-csq"/>
+            </connections>
+        </customObject>
+    </objects>
+</document>