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.
- Create an ASP.NET Web application with a ScriptManager control and install Juice UI and the Wijmo Juice libraries to your project via NuGet.
- In your Web application, add a standard Panel control to the main content of your page and set the ID as hSlider.
- Set the CssClass of your Panel control as hSlider. This will allow you to add CSS styling to the WijSlider.
- In Source View, drag a WijSlider control to the page.
- Select View | Properties from the Visual Studio menu and find the WijSlider in the drop-down list at the top of the Properties window.
- Locate the DragFill property and set it to true.
- Locate the Range property and set it to true.
- Set the Value property to 2 and the Values property to 3, 105.
- 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>
- Press F5 to run your application. The WijSlider control should resemble the following image: