Added Price filter with IonRangeSlider, sass style enhance, cleanup package.json

Author: okibayu

Diff for: ism/react-app/package-lock.json

@@ -16,6 +16,7 @@
     "react": "^16.12.0",
     "react-bootstrap": "^1.0.0-beta.16",
     "react-dom": "^16.12.0",
+    "react-ion-slider": "^1.0.5",
     "react-owl-carousel": "^2.3.1",
     "react-popper": "^1.3.7",
     "react-router-dom": "^5.1.2",

Diff for: ism/react-app/package.json

@@ -8,6 +8,7 @@
     <link rel="stylesheet" type="text/css" href="vendor/font-awesome/css/all.min.css" />
     <link rel="stylesheet" type="text/css" href="vendor/owl.carousel/assets/owl.theme.default.min.css" />
     <link rel="stylesheet" type="text/css" href="vendor/daterangepicker/daterangepicker.css" />
+    <link rel="stylesheet" type="text/css" href="vendor/ion-rangeslider/css/ion.rangeSlider.min.css" />
     <link rel="stylesheet" type="text/css" href="css/animate.min.css">
     <link rel="stylesheet" type="text/css" href="css/stylesheet.css" />
     <title>Index Train</title>
@@ -25,6 +26,7 @@
       <script src="vendor/bootstrap-spinner/bootstrap-spinner.js"></script> 
       <script src="vendor/daterangepicker/moment.min.js"></script> 
       <script src="vendor/daterangepicker/daterangepicker.js"></script> 
+      <script src="vendor/ion-rangeslider/js/ion.rangeSlider.min.js"></script>
       <script>
       $(function() {
       'use strict';

Diff for: ism/react-app/public/index.html

@@ -10,7 +10,6 @@
 
 // Content Blocks
 @import "header";
-//@import "rechargebill";
 @import "booking"; // Search Form 
 @import "elements";
 @import "footer";
@@ -33,7 +32,7 @@ body {
 		width: 10px;
 	}
 	&::-webkit-scrollbar-track {
-		-webkit-box-shadow: inset 0 0 6px #e5e5e5;
+		box-shadow: inset 0 0 6px #e5e5e5;
 		border-radius: 10px;
 	}
 	&::-webkit-scrollbar-thumb {
@@ -514,49 +513,66 @@ section.page-header.bg-page-header {
 #harga-tiket {
 	div {
 		>span {
-			>.irs-bar {
-				height: 7px;
-				top: 24px;
-				background: linear-gradient(45deg, rgba(250, 250, 250, 0.8) 0%, rgba(255, 193, 7, 0.7) 35%, rgb(220, 53, 69) 100%);
-			}
+			 >.irs-bar {
+				height: 5px;
+			// 	top: 24px;
+			background-color: #0071cc;;
+			// 	background: linear-gradient(45deg, rgba(250, 250, 250, 0.8) 0%, rgba(255, 193, 7, 0.7) 35%, rgb(220, 53, 69) 100%);
+			 }
 			>span {
-				>.irs-line {
-					height: 5px;
-					background: linear-gradient(90deg, rgba(250, 250, 250, 0) 0%, #dee2e6 35%, #e4e9ec 100%);
-				}
+				 >.irs-line {
+				// 	height: 5px;
+				 	background: linear-gradient(90deg, rgba(250, 250, 250, 0) 0%, #dee2e6 35%, #e4e9ec 100%);
+				 }
 				>.irs-min {
-					color: #999;
-					background: #fff;
+					color: transparent;
+					background: transparent;
 				}
 				>.irs-max {
-					color: #999;
-					background: #fff;
+					color: transparent;
+					background: transparent;
 				}
 				>.irs-grid-text {
 					color: #ccc;
-					background: #fff;
+					font-size: 9px;
+				//	background: #fff;
 				}
 				>.irs-from {
 					background: #fff;
-					color: #000;
+					color: #0071cc;
+					font-size: 12px;
 				}
 				>.irs-to {
 					background: #fff;
-					color: #000;
+					color: #0071cc;
+					font-size: 12px;
+				}
+				>.irs-single {
+					background: #fff;
+					color: #0071cc;
+					font-size: 12px;
+				}
+				>.irs-with-grid {
+					height: 65px;
+					left: 15px;
 				}
 				>.irs-grid-pol {
-					background: #ccc;
+				//	background: #ccc;
 				}
 				>.irs-grid {
-					bottom: 4px;
-					left: 0;
-					width: 100%;
-					height: 20px;
+				//	bottom: 4px;
+				//	left: 0;
+				//	width: 50%;
+				//	height: 10px;
 				}
 			}
-			>span.irs-handle {
-				height: 11px;
-			}
+			 >span.irs-handle {
+				 height: 20px;
+				 width: 20px;
+				 top: 28px;
+				 bottom: 7px;
+				 border: 4px solid #0071cc;
+			 }
 			>span.irs-handle.from {
 				i {
 					background: #e4e4e4;