fix for spikes border

Author: Vincenius

components/Generator/Controls.js

@@ -75,6 +75,7 @@ const Controls = props => {
                                     aria-labelledby={`${key}-slider`}
                                     min={option.min}
                                     max={option.max}
+                                    step={option.step}
                                 />
                             </S.SliderContainer>
                         )}

components/Generator/codeGenerators.js

@@ -120,7 +120,7 @@ ${cssClass ? `.${cssClass}` : '&'}::after {
   height: ${size.value}px;
   background-size: ${size.value}px 100%;
   background-image: linear-gradient(135deg, ${darkGrey} 25%, transparent 25%), linear-gradient(225deg, ${darkGrey} 25%, transparent 25%);
-  background-position: ${left.value}%;
+  background-position: ${left.value}% 0;
 }`
 
 export const generateTriangleCss = ({ reversed, size, left, cssClass }) =>

components/Generator/constants.js

@@ -52,6 +52,7 @@ export const SEPARATOR_OPTIONS = {
             value: 50,
             min: 10,
             max: 400,
+            step: 5,
         },
         left: {
             value: 0,