john/tractatus
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

fix(bi): add explicit slider track styling for cross-browser visibility

Browse source 
Fixed invisible sliders in cost configuration modal by adding:

1. Explicit .slider base styles:
   - height: 8px (was conflicting with Tailwind h-2)
   - background: #e9d5ff (light purple)
   - appearance: none for both -webkit and standard

2. Track-specific styling:
   - ::-webkit-slider-track for Chrome/Safari/Edge
   - ::-moz-range-track for Firefox
   - Both get 8px height + purple background

3. Removed conflicting Tailwind classes:
   - Changed from "w-full h-2 bg-purple-200 rounded-lg..." to just "slider"
   - Custom CSS now has complete control

Issue: appearance-none removes native styling but browsers need
explicit track styles to render the slider bar visible.

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
TheFlow 2025-10-27 11:23:11 +13:00
parent 6a0c89195c
commit 7ce444cc7f
1 changed files with 31 additions and 1 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

32
public/js/admin/audit-analytics.js
View file

@ -993,7 +993,7 @@ async function showCostConfigModal() {
<input type="range" id="cost-${severity}-slider"
min="${config.min}" max="${config.max}" step="${config.step}"
value="${amount}"
class="w-full h-2 bg-purple-200 rounded-lg appearance-none cursor-pointer slider">
class="slider">
<div class="flex justify-between text-xs text-gray-500 mt-1">
<span>$${(config.min / 1000).toFixed(0)}k</span>
<span>$${(config.max / 1000).toFixed(0)}k</span>
@ -1042,7 +1042,26 @@ async function showCostConfigModal() {
<style>
/* Custom slider styling */
.slider {
-webkit-appearance: none;
appearance: none;
width: 100%;
height: 8px;
background: #e9d5ff;
border-radius: 5px;
outline: none;
}
/* WebKit browsers (Chrome, Safari, Edge) */
.slider::-webkit-slider-track {
width: 100%;
height: 8px;
background: #e9d5ff;
border-radius: 5px;
}
.slider::-webkit-slider-thumb {
-webkit-appearance: none;
appearance: none;
width: 20px;
height: 20px;
@ -1051,10 +1070,20 @@ async function showCostConfigModal() {
cursor: pointer;
transition: all 0.15s ease;
}
.slider::-webkit-slider-thumb:hover {
background: #7e22ce;
transform: scale(1.1);
}
/* Firefox */
.slider::-moz-range-track {
width: 100%;
height: 8px;
background: #e9d5ff;
border-radius: 5px;
}
.slider::-moz-range-thumb {
width: 20px;
height: 20px;
@ -1064,6 +1093,7 @@ async function showCostConfigModal() {
border: none;
transition: all 0.15s ease;
}
.slider::-moz-range-thumb:hover {
background: #7e22ce;
transform: scale(1.1);