slider css changes

AZ1688 · Jun 8, 2023 · 320af9e · 320af9e
1 parent 835eaaf
commit 320af9e
Show file tree

Hide file tree

Showing 2 changed files with 52 additions and 1 deletion.
diff --git a/gui/pages/Dashboard/TopBar.js b/gui/pages/Dashboard/TopBar.js
@@ -134,7 +134,7 @@ export default function TopBar({selectedProject, organisationId, userName, env})
           {/*<div style={{marginTop:'15px'}}>*/}
           {/*  <label className={agentStyles.form_label}>Temperature</label>*/}
           {/*  <div style={{display:'flex',alignItems:'center',justifyContent:'space-between'}}>*/}
-          {/*    <input style={{width:'90%'}} type="range" step={0.1} min={0} max={1} value={temperature} onChange={handleTemperatureChange}/>*/}
+          {/*    <input style={{width:'89%'}} type="range" step={0.1} min={0} max={1} value={temperature} onChange={handleTemperatureChange}/>*/}
           {/*    <input style={{width:'9%',order:'1',textAlign:'center',paddingLeft:'0',paddingRight:'0'}} disabled={true} className="input_medium" type="text" value={temperature}/>*/}
           {/*  </div>*/}
           {/*</div>*/}

diff --git a/gui/pages/_app.css b/gui/pages/_app.css
@@ -51,6 +51,57 @@ input[type=checkbox i] {
     cursor: pointer !important;
 }
 
+input[type="range"] {
+    appearance: none;
+    width: 100%;
+    height: 8px;
+    background: #28243A;
+    outline: none;
+    opacity: 1;
+    border-radius: 20px;
+    transition: 0.2s;
+}
+
+input[type="range"]::-webkit-slider-thumb {
+    border-radius: 100px;
+    border: 2px solid #8C8C8C;
+    appearance: none;
+    width: 20px;
+    height: 20px;
+    background: #FFFFFF;
+    cursor: pointer;
+    box-shadow: -3px 3px 8px rgba(0, 0, 0, 0.3);
+    margin-top: -5px;
+}
+
+input[type="range"]::-moz-range-thumb {
+    border-radius: 100px;
+    border: 2px solid #8C8C8C;
+    appearance: none;
+    width: 20px;
+    height: 20px;
+    background: #FFFFFF;
+    cursor: pointer;
+    box-shadow: -3px 3px 8px rgba(0, 0, 0, 0.3);
+    margin-top: -5px;
+}
+
+input[type="range"]::-webkit-slider-runnable-track {
+    width: 100%;
+    height: 8px;
+    cursor: pointer;
+    border-radius: 20px;
+    background: linear-gradient(to right, #8C8C8C 0%, #28243A 0%);
+}
+
+input[type="range"]::-moz-range-track {
+    width: 100%;
+    height: 8px;
+    cursor: pointer;
+    border-radius: 20px;
+    background: linear-gradient(to right, #8C8C8C 0%, #28243A 0%);
+}
+
 .checkbox {
     appearance: none;
     background-color: #222222;