CMS: Adding and Setting Up a Slider Input Element
5 min read
Add a slider input element to give visitors a way to select from a range of numbers and submit their selection to your collection.
Before you begin:
- Make sure to add the CMS to your site if you haven't already.
- Make sure you have a collection with suitable permissions for storing submissions from the slider input element.
Step 1 | Add and set up the slider
After adding the slider to your page, customize the settings, layout and design of this input element.
Wix Editor
Studio Editor
- Click Add Elements
on the left side of the editor. - Click Input.
- Click Slider.
- Click and drag the slider element of your choice onto the page.
- Click Settings on the slider element.
- Enter the Field title that will display at the top of the slider.
- Choose the Slider type:
- Continuous: Visitors can select any value within the range you define.
- Stepped: Visitors can select specific values from a range you define. Select an option under Set steps by:
- Step Value: Enter the value of each step. The step value is divided by the value range you set below.
- Number of steps: Enter the number of steps that will appear in the slider.
- Under Value range, choose the minimum and maximum value for your slider and what value you want to be selected by default.
- (Optional) Click the Read only checkbox to restrict the slider from being used to write content to the collection. This is helpful if you're using the element to display content rather than submit it.
- Click the Layout icon
to edit additional settings. Set the spacing, handle appearance, steps layout, value label, prefixes and suffixes. - Click the Design icon
to choose a preset design. Then click Customize Design to adjust the design further.
Step 2 | Connect the slider to the CMS
Connect the slider to a dataset that connects to the collection where the submissions will be stored. You can connect to an existing number field type or create a new one in your collection.
Wix Editor
Studio Editor
- In your editor, click the slider element.
- Click the Connect to CMS icon
. - Click the Choose a dataset drop-down and select an existing dataset that connects to your collection. Alternatively, click Add a Dataset, then choose the collection you want to connect, give the dataset a name and click Create.
- Click the Selected value connects to drop-down and choose the number field that the slider submits to.
Tip: Select Add new field to add a new collection field for storing the submissions. - Set the dataset mode and collection permissions:
- Click Dataset Settings.
- Click the Dataset mode drop-down and select Write or Read & Write.
- (If necessary) Click the permissions type next to Collection Permissions and select Form submissions in the 1st drop-down. You can click the additional drop-downs to refine the permissions. Click Save once you're done setting the permissions.
- Create a submit button that visitors click to submit their inputs.
Did this help?
|