Track look and feel | Infragistics Forums

280

Track look and feel

Jeffrey posted over 15 years ago

I have the requirement to use the slider to input data items like in a Query by example. Two of my requirements are: "Greater Than" and "Outside of"

All of the other cases are: less than, equal to, between... Those have a "track" visualization that makes sense, but there doesn't seem to be a way to "highlight" the track for my 2 requirements.

I know you can set the Track to FillValueMode of None|MainValue|Range is there a way to do an opposite of MainValue or Range? in css or in an override? or do I need to submit this as a change to teh control?

thanks

24497

[Infragistics] Viktor Snezhko posted over 15 years ago

Hi,

You may have separate styles for any portion of track bar (left, middle, right areas). You also may implement out-of-range behavior on client. For styling you may look at various styles provided by installation, though, Default also can be used. I wrote an example which has red, orange, yellow zones, and do not allow left thumb (red background) go above 40, and right thumb (yellow background) go below 60.

<style type="text/css">
.fillCss
{
background:red;
}
.mainCss
{
background:yellow;
}
.secondCss
{
background:orange;
}
.edgeCss
{
background:none;
}
</style>

<script type="text/javascript">
function valueChanging(slider, eventArgs)
{
var val = eventArgs.get_newValue();
var max = eventArgs.get_isSecondary();
if(max && val < 60)
  eventArgs.set_cancel(true);
if(!max && val > 40)
  eventArgs.set_cancel(true);
}
</script>
<asp:ScriptManager ID="ScriptManager1" runat="server" />
<ig:WebSlider ID="WebSlider1" runat="server" EnableSecondaryValue="True"
   ThumbsInteractionMode="Lock">
  <Track>
   <CssClasses SecondaryValueFillCssClass="secondCss"
    ValueFillCssClass="fillCss" CssClass="mainCss" LeftOrTopEdgeCssClass="edgeCss"
    RightOrBottomEdgeCssClass="edgeCss" />
  </Track>
    <ClientEvents ValueChanging="valueChanging" />
</ig:WebSlider>
Cancel
Reply

Cancel