Jotform’s Knob Canvas widget lets you add an interactive dial to your form so users can select a numeric value by turning a knob instead of typing a number. You can adjust the value range and customize the knob’s colors and appearance to match your form’s design.
Here are a few ways to use it:
- Add a turnable knob or dial to your form.
- Let users select numeric values interactively.
- Customize the colors and appearance of the knob.
- Create a more engaging form experience.
Whether you’re creating a new form or updating an existing one, you can add and set up the Knob Canvas widget in a few easy steps. Here’s how to do it:
- In Form Builder, click on Add Element on the left side of the page.
- Now, in the Form Elements menu, under the Widgets tab, search for Knob Canvas and click on it. Or, just drag and drop it to where you want it to be on your form.
- Next, in the Widget Settings window that opens on the right side of the page, under the General tab, you’ll see this list of settings you can configure:
- Foreground Color — Set the color of the slider’s foreground.
- Background Color — Set the color of the slider’s background.
- Min Value — Define the minimum value the slider can have.
- Max Value — Define the maximum value the slider can have.
- Then, scroll down to the bottom and continue to set up these settings:
- Font Color — Set the color of the numbers or labels on the slider.
- Default Value — Set the initial value of the slider when the form loads.
- Once you’re done, click on Update.
That’s it. You’ve successfully added and set up the Knob Canvas widget on your form.
Want to see how it works? Check out this live demo form.
Note
- For advanced styling of the Knob Canvas widget, you can add your own custom CSS code under the Custom CSS tab in the Widget Settings. Our guide on How to Inject CSS Codes to Widgets walks you through everything.
- You can also configure the widget properties, like alignment, labels, size, visibility, and more, to control how it looks and behaves in your form. Check out our guide on How to Access and Configure the Question Properties of a Widget to learn more.





Send Comment: