Migrating from ghl-ui Slider to HighRise InputSlider

This guide will help you migrate from the ghl-ui Slider component to the new HighRise InputSlider component.

Component Implementation Changes

Import Changes

- import { UISlider } from '@gohighlevel/ghl-ui'
+ import { HLInputSlider } from '@platform-ui/highrise'

Basic Usage Changes

- <UISlider
-   v-model:value="value"
-   label="Select Value"
- />

+ <HLInputSlider
+   id="input-slider"
+   v-model:value="value"
+   label="Select Value"
+ />

Form Integration Changes

- <UIForm :model="formModel">
-   <UIFormItem label="Rating">
-     <UISlider
-       v-model:value="formModel.rating"
-       label="Select Rating"
-     />
-   </UIFormItem>
- </UIForm>

+ <HLForm :model="formModel" :rules="rules">
+   <HLFormItem
+     label="Rating"
+     path="rating"
+     required
+   >
+     <HLInputSlider
+       id="rating-slider"
+       v-model:value="formModel.rating"
+       label="Select Rating"
+     />
+   </HLFormItem>
+ </HLForm>

Props Changes

ghl-ui Prop	HighRise Prop	Notes
v-model:value	v-model:value	Changed to use value prop
status	status	New prop for validation status
validation-message	validation-message	New prop for validation feedback
size	size	New size options: 'sm', 'md', 'lg'
showInput	showInput	New prop for number input display
marks	marks	New prop for custom marks
range	range	New prop for range selection

Examples

Basic InputSlider

<template>
  <HLInputSlider id="basic-slider" v-model:value="value" label="Select Value" :min="0" :max="100" />
</template>

<script setup>
import { HLInputSlider } from '@platform-ui/highrise'
import { ref } from 'vue'

const value = ref(30)
</script>

InputSlider with Validation

<template>
  <HLForm :model="formModel" :rules="rules">
    <HLFormItem label="Rating" path="rating" required>
      <HLInputSlider
        id="rating-slider"
        v-model:value="formModel.rating"
        label="Select Rating"
        :min="0"
        :max="5"
        :step="0.5"
        :status="validationStatus"
        :validation-message="validationMessage"
      />
    </HLFormItem>
  </HLForm>
</template>

<script setup>
import { ref, computed } from 'vue'
import { HLForm, HLFormItem, HLInputSlider } from '@platform-ui/highrise'

const formModel = ref({
  rating: 0,
})

const validationStatus = computed(() => {
  if (formModel.value.rating < 1) return 'error'
  return undefined
})

const validationMessage = computed(() => {
  if (formModel.value.rating < 1) return 'Please select a rating'
  return undefined
})

const rules = {
  rating: [
    {
      required: true,
      message: 'Please select a rating',
      trigger: 'change',
    },
  ],
}
</script>

InputSlider with Different Sizes

<template>
  <div class="space-y-4">
    <HLInputSlider id="slider-lg" v-model:value="value" size="lg" label="Large Slider" :min="0" :max="100" />
    <HLInputSlider id="slider-md" v-model:value="value" size="md" label="Medium Slider" :min="0" :max="100" />
    <HLInputSlider id="slider-sm" v-model:value="value" size="sm" label="Small Slider" :min="0" :max="100" />
  </div>
</template>

<script setup>
import { HLInputSlider, HLForm, HLFormItem } from '@platform-ui/highrise'
import { ref } from 'vue'

const value = ref(50)
</script>

InputSlider with Number Input

<template>
  <HLInputSlider id="slider-input" v-model:value="value" label="Select Value" :min="0" :max="100" :showInput="true" />
</template>

<script setup>
import { ref } from 'vue'
import { HLInputSlider } from '@platform-ui/highrise'

const value = ref(50)
</script>

InputSlider with Custom Marks

<template>
  <HLInputSlider id="slider-marks" v-model:value="value" label="Select Value" :min="0" :max="100" :marks="marks" />
</template>

<script setup>
import { ref } from 'vue'
import { HLInputSlider } from '@platform-ui/highrise'

const value = ref(50)
const marks = {
  0: '0%',
  25: '25%',
  50: '50%',
  75: '75%',
  100: '100%',
}
</script>

Breaking Changes

1. Required ID

   • New required id prop for accessibility
   • Must be unique within the page

2. Type System

   • New type prop to specify single/dual handle mode
   • Default is now 'dual' instead of single value

3. Input Controls

   • New showInput prop for numeric input fields
   • Different input field behavior and validation

4. Size System

   • New size options with consistent scaling
   • Different default sizes and spacing

5. Event System

   • New drag events
   • Modified event payloads
   • Stricter type checking

6. Marks System

   • Removed marks prop
   • Use step prop for incremental values

7. Styling System

   • New CSS variable names
   • Different theming approach
   • Modified default styles

Best Practices

1. Always provide a unique id for accessibility
2. Use v-model:value for two-way binding
3. Implement proper form validation
4. Use appropriate size variants
5. Consider mobile responsiveness
6. Add proper ARIA labels
7. Handle loading states appropriately
8. Use descriptive labels
9. Implement proper error handling
10. Consider using tooltips for additional information
11. Handle disabled states properly
12. Use consistent spacing and alignment
13. Consider step size appropriateness
14. Handle min/max value constraints
15. Use appropriate marks for context
16. Consider number input visibility

Additional Notes

1. The component automatically handles focus states
2. Error states are managed through validation status
3. Supports keyboard navigation
4. Maintains consistent styling with other form components
5. Handles disabled states consistently
6. Integrates seamlessly with form validation
7. Maintains accessibility standards
8. Supports custom styling through CSS variables
9. Provides clear visual feedback for all states
10. Works well on both desktop and mobile devices
11. Supports both controlled and uncontrolled modes
12. Includes built-in validation support
13. Supports value format validation
14. Handles value parsing and formatting
15. Supports custom value formats
16. Provides clear value input validation
17. Supports range selection
18. Handles mark customization