Repository: Avaiga/taipy
File: frontend/taipy-gui/src/components/Taipy/Slider.tsx (TypeScript)

Code before:
 *
 * Unless required by applicable law or agreed to in writing, software distributed under the License is distributed on
 * an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the License for the
 * specific language governing permissions and limitations under the License.
 */

import React, { useState, useEffect, useCallback, useMemo, useRef } from "react";
import { SxProps } from "@mui/material";
import MuiSlider from "@mui/material/Slider";
import Box from "@mui/material/Box";
import Typography from "@mui/material/Typography";
import Tooltip from "@mui/material/Tooltip";

import { createSendUpdateAction } from "../../context/taipyReducers";
import { useClassNames, useDispatch, useDynamicProperty, useModule } from "../../utils/hooks";
import { LovImage, LovProps, useLovListMemo } from "./lovUtils";
import { getCssSize, getUpdateVar } from "./utils";
import { Icon } from "../../utils/icon";
import { SyntheticEvent } from "react";

interface SliderProps extends LovProps<number | string | number[] | string[], number | string | number[] | string[]> {
    width?: string;
    height?: string;
    min?: number;
    max?: number;
    step?: number;
    textAnchor?: string;
    continuous?: boolean;
    labels?: string | boolean;
    orientation?: string;
    changeDelay?: number;
}

const emptyString = () => ""

const Slider = (props: SliderProps) => {
    const {
        id,
        updateVarName,
        propagate = true,
        defaultValue,
        lov,
        defaultLov = "",
        textAnchor = "bottom",
        width = "300px",
        updateVars = "",
        valueById,
    } = props;
    const [value, setValue] = useState<number|number[]>(0);
    const dispatch = useDispatch();
    const delayCall = useRef(-1);

Review comment (suggestion):
the property needs to be declared on the back end too
See https://vscode.dev/github/Avaiga/taipy/blob/develop/taipy/gui/_renderers/factory.py#L428
Something like `("step", PropertyType.number, 1)` should do

Code after:
 *
 * Unless required by applicable law or agreed to in writing, software distributed under the License is distributed on
 * an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the License for the
 * specific language governing permissions and limitations under the License.
 */

import React, { useState, useEffect, useCallback, useMemo, useRef } from "react";
import { SxProps } from "@mui/material";
import MuiSlider from "@mui/material/Slider";
import Box from "@mui/material/Box";
import Typography from "@mui/material/Typography";
import Tooltip from "@mui/material/Tooltip";

import { createSendUpdateAction } from "../../context/taipyReducers";
import { useClassNames, useDispatch, useDynamicProperty, useModule } from "../../utils/hooks";
import { LovImage, LovProps, useLovListMemo } from "./lovUtils";
import { getCssSize, getUpdateVar } from "./utils";
import { Icon } from "../../utils/icon";
import { SyntheticEvent } from "react";

interface SliderProps extends LovProps<number | string | number[] | string[], number | string | number[] | string[]> {
    width?: string;
    height?: string;
    min?: number;
    max?: number;
    step?: number;
    textAnchor?: string;
    continuous?: boolean;
    labels?: string | boolean;
    orientation?: string;
    changeDelay?: number;
}

const emptyString = () => ""

const Slider = (props: SliderProps) => {
    const {
        id,
        updateVarName,
        propagate = true,
        defaultValue,
        lov,
        defaultLov = "",
        textAnchor = "bottom",
        width = "300px",
        updateVars = "",
        valueById,
        step = 1,
    } = props;
    const [value, setValue] = useState<number|number[]>(0);
    const dispatch = useDispatch();