Update RAM slider.

Author: writeonlycode

themes/mc-server-theme-amp/assets/scss/sections/_plans-custom.scss

@@ -164,26 +164,39 @@
   }
 
 
-  .slider {
-    width: 100%;
-  }
-
-  .tickmarks {
-    display: flex;
-    justify-content: space-between;
-    padding: 10px 0;
-    padding-left: 4px;
-  }
-  .tickmarks p {
-    position: relative;
-    padding: 8px 0;
+  .slider-selector {
+    .slider {
+      width: 100%;
+    }
 
-    display: flex;
-    justify-content: center;
-    text-align: center;
+    .tickmarks {
+      display: flex;
+      justify-content: space-between;
+      padding: 10px 0;
+      padding-left: 6px;
+      padding-right: 4px;
+    }
+    .tickmarks p {
+      position: relative;
+      padding: 8px 0;
 
-    min-width: 16px;
-    max-width: 16px;
+      display: flex;
+      justify-content: center;
+      text-align: center;
+
+      min-width: 16px;
+      max-width: 16px;
+
+      &::before {
+        content: " ";
+        position: absolute;
+        top: -6px;
+        left: 50%;
+        width: 2px;
+        height: 6px;
+        background-color: lightgray;
+      }
+    }
   }
 }
 

themes/mc-server-theme-amp/layouts/partials/icons/tick.html

@@ -0,0 +1,3 @@
+<svg width="8" height="8" version="1.1" xmlns="http://www.w3.org/2000/svg">
+    <rect x="4" y="0" width="1" height="8" stroke="black" fill="transparent" stroke-width="1"/>
+</svg>

themes/mc-server-theme-amp/layouts/partials/section/plans-custom-purchase.html

@@ -46,7 +46,7 @@ <h2 class="font-size-32 font-weight-bold text-align-center padding-y-16">Total</
 
     <div id="tabpanel1" role="tabpanel" aria-labelledby="tab1" class="display-flex flex-direction-column align-items-center" option selected>
       <h3 class="font-size-20 font-weight-bold text-align-center padding-y-64">How much RAM will you need?</h3>
-      <div class="ram-selector display-flex justify-content-center row">
+      <div class="slider-selector display-flex justify-content-center row">
         <div class="column-12 column-sm-10 column-md-8 column-lg-6 column-xl-4">
           {{ range where $data.Params.product.customFields ".name" "RAM" }}
           <div class="slider-container padding-32">
@@ -55,8 +55,9 @@ <h3 class="font-size-20 font-weight-bold text-align-center padding-y-64">How muc
             {{ range $i, $e := .options }} {{ if (eq $e.name $value) }}{{ $index = $i }}{{ end }} {{ end }}
             <input id="ramRange" type="range" min="0" max="{{ sub (len .options) 1 }}" value="{{ $index }}" step='1' class="slider styled-slider slider-progress" list='ram-tickmarks'>
             <div class="tickmarks" id="ram-tickmarks">
-              {{ range .options }}
-                <p>{{ .name }}</p>
+              {{ $last := sub (len .options) 1 }}
+              {{ range $i, $e := .options }}
+                <p>{{ if (or (eq $i 0) (eq $i $last)) }}{{ .name }}{{ end }}</p>
               {{ end }}
             </div>
           </div>
@@ -93,7 +94,7 @@ <h3 class="font-size-20 font-weight-bold text-align-center padding-y-64">Select
           </div>
         </div>
       </div>
-      <div class="ram-selector display-flex justify-content-center row">
+      <div class="slider-selector display-flex justify-content-center row">
         <div class="column-12 column-sm-10 column-md-8 column-lg-6 column-xl-5 column-xxl-4">
           <div class="padding-x-lg-16">
             <div class="slider-container padding-32">
@@ -178,7 +179,7 @@ <h3 class="font-size-20 font-weight-bold text-align-center padding-y-64">Select
             <p class="padding-top-16 font-weight-semi-bold text-align-center white-space-nowrap">Minecraft Servers</p>
           </div>
 
-          <div class="ram-selector focused-block display-flex justify-content-center">
+          <div class="slider-selector focused-block display-flex justify-content-center">
             <div class="slider-container padding-32 padding-top-16 width-100">
               <div class="padding-x-lg-16">
                 <div class="display-flex align-items-center justify-content-center margin-bottom-16">
@@ -223,7 +224,7 @@ <h3 class="font-size-20 font-weight-bold text-align-center padding-y-64">Select
             <p class="padding-top-16 font-weight-semi-bold text-align-center white-space-nowrap">VPS Servers</p>
           </div>
 
-          <div class="ram-selector focused-block display-flex justify-content-center">
+          <div class="slider-selector focused-block display-flex justify-content-center">
             <div class="slider-container padding-32 padding-top-16 width-100">
               <div class="padding-x-lg-16">
                 <div class="display-flex align-items-center justify-content-center margin-bottom-16">
@@ -268,7 +269,7 @@ <h3 class="font-size-20 font-weight-bold text-align-center padding-y-64">Select
             <p class="padding-top-16 font-weight-semi-bold text-align-center white-space-nowrap">Web Hosting</p>
           </div>
 
-          <div class="ram-selector focused-block display-flex justify-content-center">
+          <div class="slider-selector focused-block display-flex justify-content-center">
             <div class="slider-container padding-32 padding-top-16 width-100">
               <div class="padding-x-lg-16">
                 <div class="display-flex align-items-center justify-content-center margin-bottom-16">
@@ -313,7 +314,7 @@ <h3 class="font-size-20 font-weight-bold text-align-center padding-y-64">Select
             <p class="padding-top-16 font-weight-semi-bold text-align-center white-space-nowrap">Database Servers</p>
           </div>
 
-          <div class="ram-selector focused-block display-flex justify-content-center">
+          <div class="slider-selector focused-block display-flex justify-content-center">
             <div class="slider-container padding-32 padding-top-16 width-100">
               <div class="padding-x-lg-16">
                 <div class="display-flex align-items-center justify-content-center margin-bottom-16">
@@ -357,7 +358,7 @@ <h3 class="font-size-20 font-weight-bold text-align-center padding-y-64">Select
             <p class="padding-top-16 font-weight-semi-bold text-align-center white-space-nowrap">Proxy Servers</p>
           </div>
 
-          <div class="ram-selector focused-block display-flex justify-content-center">
+          <div class="slider-selector focused-block display-flex justify-content-center">
             <div class="slider-container padding-32 padding-top-16 width-100">
               <div class="padding-x-lg-16">
                 <div class="display-flex align-items-center justify-content-center margin-bottom-16">