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.
OSC · Oct 28, 2021 · f7e36b2 · f7e36b2
1 parent d058a6d
commit f7e36b2
Show file tree

Hide file tree

Showing 2 changed files with 9 additions and 2 deletions.
diff --git 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
@@ -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">