ComponentOne ASP.NET Web Forms Edition
Task-Based Help / Customizing Appearance / Using CSS Selectors
Using CSS Selectors

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: