Adjusting size of track and knob on slider control

Dashboard
1

I'm working on adjusting the styles for the standard UI-slider control on my dashboard. I don't need to change the look of the graphics themselves but I just want to make the knob itself larger so it's easier to touch on a larger screen. So far, I found the following CSS that seems to control the knob size.

    /* --- Size Adjustments for Slider controls --- */
    .md-slider .md-thumb {
        width: 40px !important;   
        height: 40px !important;
    }
    
    .md-slider[md-vertical] .md-thumb-container .md-thumb:after {
        left: -9px !important;
    }
    
    .md-slider .md-focus-ring {
        width: 40px !important;   
        height: 40px !important;
    }

I modified the left, with, and height parameters as a test from within chrome to see which ones made the knob larger, but when applying the above code to a template node in the header of the dashboard, it doesn't appear to do anything. Am I using the wrong selectors? I basically want to enlarge the knob diameter and also make the track just a bit wider.

2

This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.