Creating a Vertical Slider using input type="range"

• fast-element-typescript-starter

  1 3 2.6 TypeScript

  A typescript starter repo for Microsoft's FAST Element.

Since raw custom elements aren't much fun to write, let's use FAST Element for this exercise. To get up and running quickly, I'll also use my FAST Element TypeScript starter.

• shoelace-css

  73 12,057 9.5 TypeScript

  A collection of professionally designed, every day UI components built on Web standards. SHOELACE IS BECOMING WEB AWESOME 👇👇👇

  

There are even more features we could bake into the component such as a disabled state, tooltip values, and a wide array of other things you can find present in something like Shoelace's Range Component. However, those are outside the scope of this post. I'll consider them an exercise for the reader. In addition, if you need a fully customizable slider, you may be better off constructing your own not using an purely because it is fairly inflexible. It doesn't accept nested children. Styling is difficult due to browser prefixes, and using custom thumbs is also challenging.

• SurveyJS

  surveyjs.io featured

  Open-Source JSON Form Builder to Create Dynamic Forms Right in Your App. With SurveyJS form UI libraries, you can build and style forms in a fully-integrated drag & drop form builder, render them in your JS app, and store form submission data in any backend, inc. PHP, ASP.NET Core, and Node.js.

  

• vertical-slider

  1 1 0.0 TypeScript

  A FAST Element based vertical slider.

If you'd like to see the component's full source, check out the repo on GitHub. This component is not currently released as an NPM package.

Suggest a related project