Skip to main content
PESDK/Web/Customization/Components

Slider

PhotoEditor SDK for Web can be customized easily. Learn how to quickly set up your editor in the proper language for your target audience.

This will replace all sliders that are used in the PhotoeditorSDK. Available in both AdvancedUI and BasicUI.

The PhotoEditorSDK exports the default Slider and also all components which are used to build the Slider.

Exported slider parts#

The following components are available in the photoeditorsdk package and can be customised to fit your needs.

  • Slider: This is the slider component that is used by default in the editor
  • SliderBase: This is a container around the child components
  • SliderLabel: This component will display the label above the slider
  • SliderContainer: This is a container around the SliderTrack and SliderInput
  • SliderTrack: This component is the slider input and styles the track and thumb
  • SliderInput: This component is the input field next to the slider

Examples#

The React component will receive the following props:

{
  tool: Tool;
  identifier?: string;
  label: string;
  value?: number;
  min?: number;
  max?: number;
  step?: number | string;
  snap?: number;
  decimal?: number;
  divider?: number;
  suffix?: string;
  showInput?: boolean;
  showLabel?: boolean;
  centerSlider?: boolean;
  adjust?: boolean;
  'aria-hidden'?: boolean;
  isDisabled?: boolean;
  onChange: (val: number) => void;
  onMouseUp?: (val: number) => void;
  onTouchEnd?: (val: number) => void;
  className?: string;
  style?: React.CSSProperties;
  children?: React.ReactNode;
}

Modifying the default Slider#

import React from "react";


import { Slider, CustomSliderProps } from "photoeditorsdk";
import styled from "styled-components";


const CustomSlider = styled(Slider)<CustomSliderProps>`
  margin: 8px;
`;


const editor = await PhotoEditorSDKUI.init({
  custom: {
    components: {
      slider: CustomSlider,
    },
  },
});

The default Slider component#

import React, { useState } from "react";


import {
  CustomSliderProps,
  SliderBase,
  SliderContainer,
  SliderInput,
  SliderLabel,
  SliderTrack,
} from "photoeditorsdk";


export const Slider: React.FC<CustomSliderProps> = ({
  "data-test": dataTest,
  label,
  identifier,
  showLabel = true,
  showInput = true,
  centerSlider = false,
  min = -1,
  max = 1,
  value = 0,
  step = 0.01,
  decimal = 0,
  divider = 100,
  suffix = "",
  adjust = false,
  "aria-hidden": ariaHidden,
  isDisabled,
  onChange,
  onMouseUp,
  onTouchEnd,
  style,
  className,
}) => {
  const [id] = useState(`photoeditorsdk-slider-${Math.random() * 10000}`);


  return (
    <SliderBase
      className={className}
      data-test={dataTest || identifier || id}
      style={style}
    >
      <SliderLabel isDisabled={isDisabled} label={label} show={showLabel} />
      <SliderContainer centerSlider={showInput && centerSlider}>
        <SliderTrack
          id={id}
          label={label}
          value={value}
          min={min}
          max={max}
          step={step}
          adjust={adjust}
          showInput={showInput}
          isDisabled={isDisabled}
          aria-hidden={ariaHidden}
          onChange={onChange}
          onMouseUp={onMouseUp}
          onTouchEnd={onTouchEnd}
        />
        {showInput && (
          <SliderInput
            id={id}
            value={value}
            min={min}
            max={max}
            divider={divider}
            suffix={suffix}
            decimal={decimal}
            isDisabled={isDisabled}
            aria-hidden={ariaHidden}
            onChange={onChange}
            onMouseUp={onMouseUp}
            onTouchEnd={onTouchEnd}
          />
        )}
      </SliderContainer>
    </SliderBase>
  );
};


const editor = await PhotoEditorSDKUI.init({
  custom: {
    components: {
      slider: Slider,
    },
  },
});

Default configuration#

custom: {
  components: {
    slider: Slider,
  }
}