ComponentOne Slider for ASP.NET WebForms
Task-Based Help / Customizing Appearance / Using CSS Selectors
In This Topic
    Using CSS Selectors
    In This Topic

    Setting C1Slider's CSS Selectors gives you control over the slider's appearance.

    Complete these steps:

    1. Click View | Properties in the Visual Studio toolbar.
    2. In the Properties window, locate the CssClass property and use the drop-down list to set it to wijmo-wijslider.
    3. Switch to Source View and locate the first set of <asp:Content> tags. Insert the following tag set:
      Copy Code 
      <style type="text/css"></style>

    4. Insert the following CSS script into the <style> tags. This will set the appearance properties of the slider control.
      Copy Code 
      .wijmo-wijslider-incbutton
        {
        background: #308014;
        }
        
        .wijmo-wijslider-decbutton
        {
        background: #308014;
        }
        
        .wijmo-wijslider
        {
        border-color: #000000; border-width: medium; background-color: #3d9140;
        }
        
        .wijmo-wijslider-incbutton .ui-icon-triangle-1-e
        {
        background-color: #ffffff;
        }
        
        .wijmo-wijslider .ui-slider-handle
        {
        background: #308014;
        }
        
        .wijmo-wijslider .ui-state-active
        {
        background: #ffffff;
        }
    5. Press F5 to run your application. The slider control should appear as in the following image:

      Note that when you click on the handle, it turns white: