B4J Library [ABMaterial]: MashRangeSlider

Discussion in 'B4J Libraries & Classes' started by Mashiane, Dec 7, 2017.

  1. Mashiane

    Mashiane Well-Known Member Licensed User

    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.

    MashRangeSlider.gif


    Upcoming in the next version of MashPlugIns.

    In Class_Globals, define the components..

    Code:
    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...

    Code:
    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

    Code:
    Sub rs1_change(value As Map)
       
    Dim valuex As String = value.GetDefault("value","")
       txtValue.Text = valuex
       txtValue.refresh
    End Sub
    Watch this space...
     
    amaxco, Don Oso and joulongleu like this.
  2. Cableguy

    Cableguy Expert Licensed User

    nice looking too
    are your plug-ins themable?
     
    joulongleu likes this.
  3. Mashiane

    Mashiane Well-Known Member Licensed User

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

    Mashiane Well-Known Member Licensed User

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

    Code:
    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.
     
    joulongleu likes this.
Loading...