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" />
+ <HLInputSlider id="input-slider" v-model:value="value" type="single" :min="0" :max="100" />

Form Integration Changes

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

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

Props Changes

ghl-ui Prop	HighRise Prop	Notes
v-model:value	v-model:value	Same binding; emits update:value
size	size	Token changes to sm | md | lg (form-injected); default md
-	type	New: 'single' | 'dual'; default 'dual' (ghl-ui was single by default)
-	showInput	New: renders numeric inputs beside the slider
-	showMinMax	New: toggles min/max labels beside the rail (default true)
-	formatTooltip	New default formatter value => \${value}%``; accepts custom formatter
tooltip	tooltip	Same meaning; disabled when the slider is disabled
min/max	min/max	Same meaning; defaults remain 0 / 100
step	step	Same meaning; defaults to 1
marks	-	Not supported in HighRise; use step, showMinMax, or custom labels instead

Examples

Basic InputSlider

<template>
  <HLInputSlider id="basic-slider" v-model:value="value" :min="0" :max="100" type="single" />
</template>

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

const value = ref(30)
</script>

Dual Handle with Number Inputs

<template>
  <HLInputSlider
    id="range-slider"
    v-model:value="range"
    type="dual"
    :min="0"
    :max="100"
    :step="5"
    :show-input="true"
    :show-min-max="true"
  />
</template>

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

const range = ref<[number, number]>([20, 60])
</script>

InputSlider with Different Sizes

<template>
  <div class="space-y-4">
    <HLInputSlider id="slider-lg" v-model:value="value" size="lg" :min="0" :max="100" />
    <HLInputSlider id="slider-md" v-model:value="value" size="md" :min="0" :max="100" />
    <HLInputSlider id="slider-sm" v-model:value="value" size="sm" :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" :min="0" :max="100" :show-input="true" />
</template>

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

const value = ref(50)
</script>

InputSlider with Custom Tooltip

<template>
  <HLInputSlider id="slider-tooltip" v-model:value="value" :min="0" :max="10" :format-tooltip="val => `${val} pts`" />
</template>

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

const value = ref(5)
</script>

Breaking Changes

1. Handle mode: defaults to dual; set type="single" for a single handle
2. Marks: marks prop is not available; use step, showMinMax, or custom labels instead
3. Sizes: tokens change to sm/md/lg with default md
4. Inputs: showInput and showMinMax are new controls for number fields and rail labels
5. Tooltips: default formatter is now ${value}%; provide formatTooltip for custom text
6. IDs: id is optional (auto-generated when omitted)

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