From f7e36b25e4dd08b240c3490eeb8b210c7883a647 Mon Sep 17 00:00:00 2001
From: trav271rt <travert@osc.edu>
Date: Thu, 28 Oct 2021 14:13:43 -0400
Subject: [PATCH] Added custom range class for contrast with range slider.
 (#1537)

* Added custom range class for contrast with range slider.

* Adjusting slider width for cleaner UI.
---
 .../app/assets/stylesheets/batch_connect/sessions.scss     | 7 +++++++
 .../batch_connect/sessions/connections/_novnc.html.erb     | 4 ++--
 2 files changed, 9 insertions(+), 2 deletions(-)

diff --git a/apps/dashboard/app/assets/stylesheets/batch_connect/sessions.scss b/apps/dashboard/app/assets/stylesheets/batch_connect/sessions.scss
index 2785feaf46..66f77d28a6 100644
--- a/apps/dashboard/app/assets/stylesheets/batch_connect/sessions.scss
+++ b/apps/dashboard/app/assets/stylesheets/batch_connect/sessions.scss
@@ -19,5 +19,12 @@
   padding-bottom: 3px;
   color: #777;
   font-size: 12px;
+  color: #337ab7;
   background-color: #f5f5f5;
 }
+
+.custom-range {
+  height: 4px;
+  box-shadow: inset 0 1px 10px gray;
+  border-radius: 0.50rem;
+}
diff --git a/apps/dashboard/app/views/batch_connect/sessions/connections/_novnc.html.erb b/apps/dashboard/app/views/batch_connect/sessions/connections/_novnc.html.erb
index cfb944d33d..d96cf51aef 100644
--- a/apps/dashboard/app/views/batch_connect/sessions/connections/_novnc.html.erb
+++ b/apps/dashboard/app/views/batch_connect/sessions/connections/_novnc.html.erb
@@ -6,10 +6,10 @@
 
  <div class="row">
   <div class="col-sm-6">
-   <%= f.number_field(:compressionsetting, type: 'range', min: 0, max: 9, value: 6, label: "Compression", help: "0 (low) to 9 (high)") %>
+   <%= f.number_field(:compressionsetting, class: 'custom-range', type: 'range', min: 0, max: 9, value: 6, label: "Compression", help: "0 (low) to 9 (high)") %>
   </div>
   <div class="col-sm-6">
-   <%= f.number_field(:qualitysetting, type: 'range', min: 0, max: 9, value: 2, label: "Image Quality", help: "0 (low) to 9 (high)") %>
+   <%= f.number_field(:qualitysetting, class: 'custom-range', type: 'range', min: 0, max: 9, value: 2, label: "Image Quality", help: "0 (low) to 9 (high)") %>
   </div>
  </div>
  <script type="text/javascript">