[V2.0.4] Slider Class - Create Sliders With Ease!

Hello developers! I’m excited to release my slider module, it allows you to create customizable sliders with ease!

:books: Overview :books:

This class allows you to create sliders with minimum lines of code and tons of customizability to fit your needs while staying very beginner friendly! This class supports vertical and horizontal axis as well as “waypoints”, they allow you to create points that you can easily detect when the user enters it, which adds more possibilities to your sliders!

:rocket: Starting off :rocket:

You will need to get the model before continuing, a game file is found at the end of the post an example is found inside the module to help you get familiar with the system!

:notebook_with_decorative_cover: API :notebook_with_decorative_cover:

    🔨 Making A Slider Object 🔨

    To create a slider Object, just do:

local Slider = require(path.to.slider.module)

local slider = Slider.new(sliderFrame, properties)
  • sliderFrame is the the object that will become draggable, it must be a GuiObject parented to another GuiObject.

  • properties is a table containing all properties of the slider, check Custom Types section below for more info.

From now on, we will use the slider Object we created for the rest of the API.

    🔒 Main Methods 🔓
    • slider:Enable()
      parameters: widget: PluginGui? (read the Plugin section.)
      returns: nil

    • slider:Disable()
      parameters: nil
      returns: nil

    • slider:Reset()
      parameters: nil
      returns: nil
      notes: Resets the slider’s position to properties.defaultValue

    📝 Get Methods 📝
    • slider:GetStep()
      parameters: nil
      returns: number

    • slider:GetValue()
      parameters: usePercentage: boolean
      returns: number

    • slider:GetValues()
      parameters: nil
      returns: values: values

    🔍 Set Methods 🔍
    • slider:SetPluginMouse()
      parameters: plugin: Plugin
      returns: nil

    • slider:SetStep()
      parameters: n: number
      returns: nil

    • slider:SetValue()
      parameters: value: number, isPercentage: boolean
      returns: nil

    • slider:SetValues()
      parameters: values: values
      returns: nil

    :closed_lock_with_key: Internal Methods :closed_lock_with_key:

    • slider:SetPosition()
      parameters: position: UDim2, forced: boolean, frame: GuiObject?
      returns: nil

    :hammer_and_wrench: Waypoint Methods :hammer_and_wrench:

    • slider:AddWaypoint()
      parameters: n: number, isPercentage: boolean
      returns: waypoint,

    • slider:RemoveWaypoint()
      parameters: n: number
      returns: nil

    • slider:ShowWaypoint()
      parameters: n: number
      returns: nil

    • slider:HideWaypoint()
      parameters: n: number
      returns: nil

    • slider:ShowWaypoints()
      parameters: nil
      returns: nil

    • slider:HideWaypoints()
      parameters: nil
      returns: nil

    :hammer_and_wrench: Tracker Methods :hammer_and_wrench:

    • slider:AddTracker()
      parameters: label: TextLabel, roundFunction: roundFunction, textMakerFunction: textMakerFunction
      returns: Tracker,

      • roundFunction
        parameters: n: number
        returns: string
        optional: yes
        default value: utilityFunctions.roundToDecimalPlaces

      • textMakerFunction
        parameters: _string: string (return from roundFunction
        returns: string (text to be displayed)
        optional: yes
        default value: a function that returns the string as it is.

    • slider:EnableTracker()
      parameters: tracker: Tracker
      returns: nil

    • slider:DisableTracker()
      parameters: tracker: Tracker
      returns: nil

    • slider:EnableTrackers()
      parameters: nil
      returns: nil

    • slider:DisableTrackers()
      parameters: nil
      returns: nil

    :signal_strength: Signals / Events :signal_strength:

    • slider.moved:Connect()
      parameters: callback(isForced: boolean):

    • slider.waypointEntered:Connect()
      parameters: callback: (isForced: boolean) → nil):

    Both functions passed to the Connect method get 1 parameter, isForced, a boolean, stating whether or not the slider was moved using slider:SetValue(), they return nil

:dna: Custom Types :dna:

    🏷️ Properties 🏷️
    • step: number
      description: How small or big a user moves per drag
      default value: 0.01
      optional: yes

    • xboxStep: number
      description: How small or big a user moves per drag with the Xbox controller
      default value: 0.1
      optional: yes

    • canLeaveFrame: boolean
      description: whether or not the slider Frame can leave the parent frame, when set to true, the slider can go outside the frame by half it’s size.
      default value: true
      optional: yes

    • canFullyLeaveFrame: boolean
      description: whether or not the slider Frame can completely leave the parent frame, when set to true, the slider can leave it’s parent completely so that the end of the frame touches the start of the slider Frame or the start of the slider Frame touches the end of the parent frame
      default value: false
      optional: yes

    • moveToMouse: boolean
      description: Whether or not the slider moves to the mouse even when it’s not hovering it, when set to true, clicking anywhere on the parent slider will move the slider to the mouse’s position.
      default value: false
      optional: yes

    • waypoints: {[number]: waypoint}
      description: Holds the waypoints of the slider, no need to mess with it
      default value: {}
      optional: yes

    • trackers: {[number]: tracker}
      description: Holds the trackers of the slider, no need to mess with it
      default value: {}
      optional: yes

    • values: {min: number, max: number}
      description: Minimum and maximum values of the slider, use in slider:GetValue(false).
      default value: {min = 0, max = 1}
      optional: yes (better to specify)

    • defaultValue: number
      description: The default position of the slider.
      default value: (properties.max + properties.min) / 2
      optional: yes

    • axis: string
      description: The axis in which the slider moves at, X or Y.
      default value: X
      optional: yes

These types are just made for the ease of use and for code recommendations, check the Slider.types module for more info.

:electric_plug: Plugin :electric_plug:

  • Use slider:SetPluginMouse(plugin) before calling slider:Enable().

  • If your using a DockWidgetPluginGui then pass an argument to slider:Enable(), widget, it’s your DockWidgetPluginGui, this allows you to create sliders in DockWidgetPluginGuis.

:checkered_flag: Finishing :checkered_flag:

Any feedback is welcome. If you found any bugs and/or want to recommend features, tell me and I’ll reply as fast as I can!

Hope my slider module will help you in the future, happy developing!
Small preview of the place file above. (Sorry for the bad quality!) (Don’t check as it isn’t updated yet.)

If I had any silly mistakes in the post please inform me! :sweat_smile:

How likely are you to use this class?
  • Very likely
  • Likely
  • Even
  • Unlikely
  • Very unlikely

0 voters

How satisfied are you with this class?
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10

0 voters

For your poll answers, please tell me the reason for your choice so I can make this even better!

- Msix


Update V1.1.0

    🐛 bug fixes 🐛
    • Waypoint class error
    • Minor post mistakes
    • Better support for X and Y axis (and working on making it better!)

    :new: News :new:

    • Waypoint type added to Slider.types
    • Explained properties in the OP
    • Added Updates section in OP
1 Like

Update V1.1.1

:new: News :new:

  • More type checking
  • More checks to avoid errors!
  • Updated Updates section in OP
  • Updated place file in OP
  • Updated model

pretty neat! one suggestion would be the ability to add a textbox that displays the value as you move the slider, and also lets you manually type in a number which sets the slider. (Like would be common for setting a mouse sensitivity number)

Hmm, that can, very easily, be made using the functions provided. But sure.

What are the advantages and disadvantages of using SliderClass, as opposed to SliderService?

@Krystaltinan, your point of view too?

Can you add some screenshots & videos to the main post? So we can see how the resource looks in action without having to insert it and test it out

Well, SliderService is a very great resource and has a lot of functionalities as well so choosing between them depends on your needs, I’ll list some features that may help you choose, mention (all) pros and cons of each.

Shared “items”

  • Step setting for the slider
  • Support for both axis
  • Getting the value of the slider according to it’s position
  • Start and End values (for more convenience when working)
  • Enabling and disabling
  • Events (like Moved )

Extra items in Slider Class (mine)

  • Waypoints, not the most needed feature but who knows who might need it.
  • Extra events (related to waypoints)
  • More ease of use when getting/setting any value
  • Easier settings changing
  • User-defined types which, if you understand them, will greatly help you in understanding (If SliderService has it please correct me!)
  • More flexibility (Correct me if I’m wrong.) as pretty much everything is easily controllable.

Here you go! Feel free to drop your feedback down below on how to make this better if possible!

1 Like

This module seems nice, it’s got a few more features which I could add to mine, however in the end it’s entirely up to the user to pick what they need and what will provide it :smiley:


Thanks for the nice words! Maybe we can work together on making an even better one with way more options? :wink:

1 Like

I meaaan, I’m always down for a collab (dm me if you want to :slight_smile: )

1 Like

A big bug has been spotted while working on new updates and is currently being worked on, please don’t use the module till I fix the problem.

The issue has been fixed, you may use this model again, the update will be dropped in less then 30 minutes!

Update V1.2.0

:bug: bug fixes :bug:

  • Better support for X and Y axis, no more pain when using them, finally!
  • Fixed the slider moving while the mouse is in wrong positions.

:new: News :new:

  • Trackers (@ph33sh, here you go!)
  • Explained trackers in OP.
  • Updated Updates section in OP
  • Updated OP to cover Trackers and Waypoints
  • added a module utilityFunctions to clean up the code (helps you in creating Trackers!)

:incoming_envelope: Coming features :incoming_envelope:

  • Trails
  • More functionality to Trackers

Update V1.2.1

:bug: bug fixes :bug:

  • fixed problems with the moveToMouse property

:new: News :new:

  • Edited Updates section in OP

An issue where slider:GetValue() doesn’t return negative values (when the min is in the negatives) has been spotted and I’m working on a fix.

The issue has been fixed! I won’t count this as an update tho.

I like that it’s draggable to anywhere

robloxapp-20230311-1328205.wmv (1.4 MB)

Glad you liked it! If you have any ideas for features feel free to tell me.