Implementation Instructions
- In your Webflow project, create a new custom code embed.
- Copy the entire HTML code (including the
<style> and <script> tags) into the custom code embed.
- Place the custom code embed where you want the slider to appear on your page.
- In your Webflow form, add a number input field with the following attributes:
- ID: "custom_slider_value"
- Class: "custom-slider-input"
- Important: After adding the input field, use Webflow's style panel to set its display property to "none". This will hide the field while still allowing it to capture the slider's value.
- (Optional) If you want to display the slider's value elsewhere in your form or page, you can add a text element and give it the ID "customSliderValue". The slider will automatically update this element with the current value.
Changing Colors
- To change the track color, modify the
stroke attribute of the #customSliderTrack path in the SVG. - To change the progress color, modify the
stroke attribute of the #customSliderProgress path in the SVG. - To change the thumb color, modify the
fill attribute of the #customSliderThumb circle in the SVG.
Adjusting Values
In the JavaScript section, you can modify these constants:
minValue: The minimum value of the slider (default: 0)maxValue: The maximum value of the slider (default: 100)defaultValue: The initial value of the slider (default: 50)increment: The step size between values (default: 1)
Styling
You can adjust the styles in the <style> section to match your design:
- Modify font sizes, colors, and weights in the CSS
- Adjust the dimensions of the slider by changing the
viewBox attribute of the SVG
Thumb Shadow
The thumb shadow can be adjusted by modifying the <filter> element in the SVG. Change the stdDeviation for blur amount and flood-opacity for shadow opacity.
Changing Labels
To change the labels:
- Find the
<div class="top-row"> section in the HTML. - Modify the text content of the
<span> elements for "Minimum" and "Maximum" labels. - Update the corresponding values in the adjacent
<span> elements.
Integration with Webflow Forms
The slider automatically updates the hidden input field (ID: "custom_slider_value") with the current value. This allows you to capture the slider value when the form is submitted.
Troubleshooting
- If the slider doesn't appear, check that the custom code is properly embedded and there are no JavaScript errors in the console.
- If the slider appears but doesn't function, ensure that all IDs in the HTML match those used in the JavaScript.
- For any styling issues, inspect the element using your browser's developer tools and adjust the CSS accordingly.