ComponentOne Wijmo Open for Juice UI
Wijmo Open for Juice UI Extender Controls / WijSlider / WijSlider Task-Based Help / Setting WijSlider's DragFill Behavior
In This Topic
    Setting WijSlider's DragFill Behavior
    In This Topic

    WijSlider allows you to create a stylable range element that can be dragged between the two handles.

    1. Create an ASP.NET Web application with a ScriptManager control and install Juice UI and the Wijmo Juice libraries to your project via NuGet.
    2. In your Web application, add a standard Panel control to the main content of  your page and set the ID as hSlider.
    3. Set the CssClass of your Panel control as hSlider. This will allow you to add CSS styling to the WijSlider.
    4. In Source View, drag a WijSlider control to the page.
    5. Select View | Properties from the Visual Studio menu and find the WijSlider in the drop-down list at the top of the Properties window.
    6. Locate the DragFill property and set it to true.
    7. Locate the Range property and set it to true.
    8. Set the Value property to 2 and the Values property to  3, 105.
    9. Add the following CSS styling to the first set of <asp:Content> tags to set the width and height of the control. This will make it easier to see the DragFill behavior.
      <style type="text/css"
      
                  .hSlider      
      
                  {       
      
                        width: 300px;       
      
                        height: 100px;       
      
                  }
      
              
      
                  .header2        
      
                  {        
      
                        margin-bottom: 10px;        
      
                  }      
      
            </style>
      
    10. Press F5 to run your application. The WijSlider control should resemble the following image: