The Official Blog of Patcoola

Im just a dude watching over my parents,
and trying to make cartoons and video games from home.

Project Vertical Value Slider

, By Patcoola

Project Title: Vertical Value Slider
Programming Language: JavaScript
Date Created: 2022-08-02

Purpose: A vertical sliding user control for changing the value from a number range.

Description: The vertical value slider is a styled user interface controller for changing and selecting a number value from a range. Ex: 0-100, -100-100, etc.

Note: This project was developed in two parts: the slider and the styler. The two were consolidated as a single class. This project was styled with the intention to be used with an upcoming project.


Donate Now!

Hey buddy, it takes a lot to make a blog. How about a donation?



The Slider Class

class.setTarget( elm );

Assign the targeted wrapper element where the slider will be created

class.setID( str );

Assign an ID to the created element

class.setClass( str );

Assign a class name space to the created element

class.setDecimals( int );

Set the allowable number to decimal places in the value

class.setValue( num );

Set the value

class.setMin( num );

Set the minimum number range limit

class.setMax( num );

Set the maximum number range limit


Function to create the slider


Function to remove the slider


Function to run the slider


Function to stop the slider


Get the number value from the slider

Style Notes:

The following class names are assigned to the created elements when the slider is made.




Donate Now!

Hey buddy, it takes a lot to make a blog. How about a donation?


Post Meta

Share Post


Comments: Write Comment

Be the first to write a comment.

Leave a Comment

All comments are reviewed before publishing. Comments must be related to the page topic, must not be spam, and must comply with the criminal code of Canada.