B4J Library [ABMaterial]: MashRangeSlider

Hi there

Why another range slider? I like this because one can use their own labels on it, like A-Z, etc.

I have also added a change event that one can trap to do something about the contents, in this case displayed in an ABMInput component.

Upcoming in the next version of MashPlugIns.

In Class_Globals, define the components..

Public rs1 As MashRangeSlider
    Public rs2 As MashRangeSlider
    Public rs3 As MashRangeSlider
    Public rs4 As MashRangeSlider
    Public rs5 As MashRangeSlider
    Public rs6 As MashRangeSlider
    Public rs7 As MashRangeSlider
    Public rs8 As MashRangeSlider
    Public rs9 As MashRangeSlider
    Public rs10 As MashRangeSlider
    Public txtValue As ABMInput
    Public rs11 As MashRangeSlider

Here are some examples of what can be done with this...

rs11.Initialize(page, "rs11")
   rs11.AddValue("Fair").addvalue("Good").AddValue("Better").AddValue("Best")
   rs11.Grid = True
   page.Cell(2,1).AddComponent(rs11.ABMComp)

rs1.Initialize(page,"rs1")
    page.Cell(3,1).AddComponent(rs1.ABMComp)
       
    rs2.Initialize(page,"rs2")
    rs2.MinValue = 100
    rs2.MaxValue = 1000
    rs2.fromValue = 550
    page.Cell(4,1).AddComponent(rs2.ABMComp)
   
    rs3.Initialize(page,"rs3")
    rs3.MinValue = 0
    rs3.MaxValue = 1000
    rs3.FromValue = 200
    rs3.ToValue = 800
    rs3.Prefix = "$"
    rs3.Grid = True
    rs3.SlideType = rs3.EnumSlideType.isdouble
    page.Cell(5,1).AddComponent(rs3.ABMComp)
   
    rs4.Initialize(page,"rs4")
    rs4.MinValue = -1000
    rs4.MaxValue = 1000
    rs4.FromValue = -500
    rs4.ToValue = 500
    rs4.Prefix = "$"
    rs4.Grid = True
    rs4.SlideType = rs4.EnumSlideType.isdouble
    page.Cell(6,1).AddComponent(rs4.ABMComp)
   
    rs5.Initialize(page,"rs5")
    rs5.MinValue = -1000
    rs5.MaxValue = 1000
    rs5.FromValue = -500
    rs5.ToValue = 500
    rs5.Prefix = "$"
    rs5.Grid = True
    rs5.StepValue = 250
    rs5.SlideType = rs5.EnumSlideType.isdouble
    page.Cell(7,1).AddComponent(rs5.ABMComp)
   
    rs6.Initialize(page,"rs6")
    rs6.MinValue = "-12.8"
    rs6.MaxValue = "12.8"
    rs6.FromValue = "-3.2"
    rs6.ToValue = "3.2"
    rs6.Grid = True
    rs6.StepValue = "0.1"
    rs6.SlideType = rs6.EnumSlideType.isdouble
    page.Cell(8,1).AddComponent(rs6.ABMComp)
   
   
    rs7.Initialize(page,"rs7")
    rs7.FromValue = "1"
    rs7.ToValue = "5"
    rs7.Grid = True
    rs7.SlideType = rs7.EnumSlideType.isdouble
    rs7.AddValue("0").AddValue("10").AddValue("100").AddValue("1000").AddValue("100000").AddValue("1000000")
    page.Cell(9,1).AddComponent(rs7.ABMComp)
   
    rs8.Initialize(page,"rs8")
    rs8.ToValue = "3"
    rs8.Grid = True
    rs8.SlideType = rs8.EnumSlideType.isdouble
    rs8.AddValue("Jan").AddValue("Feb").AddValue("Mar").AddValue("Apr").AddValue("May").AddValue("Jun")
    rs8.AddValue("Jul").AddValue("Aug").AddValue("Sep").AddValue("Oct").AddValue("Nov").AddValue("Dec")
    page.Cell(10,1).AddComponent(rs8.ABMComp)
   
    rs9.Initialize(page,"rs9")
    rs9.MinValue = 18
    rs9.MaxValue = 70
    rs9.ToValue = 30
    rs9.Prefix = "Age "
    rs9.MaxPostfix = "+"
    rs9.Grid = True
    rs9.SlideType = rs9.EnumSlideType.isdouble
    page.Cell(11,1).AddComponent(rs9.ABMComp)
   
    rs10.Initialize(page,"rs10")
    rs10.MinValue = 100
    rs10.MaxValue = 200
    rs10.ToValue = 155
    rs10.Prefix = "Weight: "
    rs10.postfix = " million pounds"
    rs10.DecorateBoth = True
    rs10.Grid = True
    rs10.ValuesSeparator = " to "
    rs10.HideMinMax = True
    rs10.HideFromTo = False  
    rs10.SlideType = rs10.EnumSlideType.isdouble
    page.Cell(12,1).AddComponent(rs10.ABMComp)

The change events

Sub rs1_change(value As Map)
   Dim valuex As String = value.GetDefault("value","")
   txtValue.Text = valuex
   txtValue.refresh
End Sub

Watch this space...

 

[Cableguy]

nice looking too
are your plug-ins themable?

 

[Mashiane]

Some are, I havent looked at the themes for this one though. Will check at some stage...

 

[Mashiane]

nice looking too
are your plug-ins themable?

What I did about these was something like this...

MashPlugIns.AddTheme("redgreen",ABM.COLOR_RED,"",ABM.COLOR_GREEN,ABM.INTENSITY_LIGHTEN3)
    MashPlugIns.AddTheme("whitelightblue",ABM.COLOR_WHITE,"",ABM.COLOR_LIGHTBLUE,"")
    MashPlugIns.AddTheme("whitered",ABM.COLOR_WHITE,"",ABM.COLOR_RED,"")
    MashPlugIns.AddTheme("alert","","",ABM.COLOR_LIGHTBLUE,"")
    MashPlugIns.AddTheme("whiteamber","white","","amber","")
    MashPlugIns.AddTheme("whitegreen","white","","green","")
    MashPlugIns.AddTheme("whiteblue","white","","blue","")
    MashPlugIns.AddTheme("whiteorange","white","","orange","")

This defines the text and background color of a theme. Then you you pass the theme name e.g. "redgreen" to the component. The text color will be red and background color green with the applied intensities.