Tutorial: Slider Fields
Form Preview

What You'll Build

Interactive forms with slider controls for selecting numeric values visually. Sliders are perfect for ratings, ranges, budgets, and any value where users benefit from seeing their selection on a scale.

What You'll Learn

  • Adding basic sliders with min/max range
  • Configuring step increments for precise control
  • Adding unit labels (e.g., "sq ft", "hours", "%")
  • Combining sliders with computed values for calculations
  • Building a complete quote calculator with multiple sliders
⚡

Interactive Learning

Every code snippet below is fully editable! Feel free to modify the code, experiment with different values, and see your changes reflected instantly in the live preview on the right.

Use the play button to run different snippet, or the refresh button to restore the original example.

Tutorial Steps

Step 1: Starting Point

Let's start with an empty form function. This is where we'll build our slider-based form step by step.

Step 2: Basic Slider

Let's add a simple slider for a rating from 0 to 10. Sliders provide an intuitive way for users to select values within a range.

💡 Tip:
Sliders use addSlider() and require min and max properties. The current value is displayed in a clickable box - users can click it to type a precise value directly!

Step 3: Custom Range & Step

Now let's add a budget slider with a custom range and step increment. The step property controls how much the value changes with each slider movement.

💡 Tip:
Use step to control the increment size. For a budget slider with $500 increments, set step: 500. The defaultValue sets the initial position.

Step 4: Adding Unit Labels

Add a unit label to make the value more meaningful. The unit is displayed next to the current value, making it clear what the number represents.

💡 Tip:
The unit property adds a label after the value (e.g., "1500 sq ft"). Common units include "sq ft", "hours", "%", "kg", "miles", etc.

Step 5: Slider with Calculation

Combine a slider with a computed value to create dynamic calculations. As the user moves the slider, the calculated result updates automatically.

💡 Tip:
Use computedValue on other fields to calculate results based on slider values. Access the slider value with form.slider('id')?.value().

Step 6: Complete Quote Calculator

Let's build a complete service quote calculator with multiple sliders. Each slider affects the final quote calculation.

💡 Tip:
Multiple sliders can feed into a single calculation. This example combines hours, complexity, and urgency to compute a dynamic quote with multipliers.

Try It Yourself

  • Challenge 1: Create a percentage slider (0-100%) with 5% steps and unit label "%"
  • Challenge 2: Add a discount slider to the quote calculator that reduces the final price
  • Challenge 3: Create a temperature slider with min: -20, max: 40, unit: "°C"

Next Steps

Excellent! You've mastered slider fields and learned how to build interactive calculators. Ready to explore more advanced form features?

Continue to Computed Values Tutorial

Other learning paths: