The Official Blog of 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.

Advertisement

Donate Now!

I don't always use the women's bathroom, but when I do, you can bet it really smells. If you like my blog, please consider donating.

---

Methods:

ver_slider_class()

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

class.create();

Function to create the slider

class.destroy();

Function to remove the slider

class.start();

Function to run the slider

class.stop();

Function to stop the slider

class.getValue();

Get the number value from the slider

Style Notes:

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

.slider-ver-wrap
.slider-body
.slider-handle
.slider-input-wrapper
.slider-input
.ticks
.marks
.marks-button

Advertisement

Donate Now!

This might not be the best time, but making a blog is not easy. Would you consider donating?

---

Be the first to write a comment.