React JS / Material UI中的三角形按钮滑块答案

【问题标题】：Triangle Button Slider In ReactJS/MaterialUIReact JS / Material UI中的三角形按钮滑块
【发布时间】：2021-02-25 11:42:11
【问题描述】：

我正在努力在 Material UI 和 ReactJS 的滑块上制作一个完美的三角形按钮而不是披萨切片按钮，这是我想要完成的任务示例：

这就是我目前所在的位置：

//应用程序

const CustumSlider = withStyles({
    root: {
        color: "transparent",
        height: 2,
        padding: '15px 0',
    },
    thumb: {
        boxShadow: iOSBoxShadow,
        marginLeft: -16,
        width: 0,
        height: 0,
        borderLeft: "16px solid transparent",
        borderRight: "16px solid transparent",
        borderBottom: "16px solid #f39200",
        cursor: "pointer",
        marginTop: "9px",
        '&:focus, &:hover, &$active': {
            color: "transparent",
            boxShadow: iOSBoxShadow,
            '@media (hover: none)': {
                boxShadow: iOSBoxShadow,
            },
        },
    },
    valueLabel: {
        left: '-16px',
        top: -25,
        fontSize: 16,
        fontFamily: "Nunito",
        fontWeight: 700,
        '& *': {
            background: 'transparent',
            color: '#f39200',
        },
    },
    track: {
        height: 15,
        borderTopLeftRadius: "5px",
        borderBottomLeftRadius: "5px",
        color: "#003865",
    },
    rail: {
        height: 15,
        opacity: 0.5,
        borderTopLeftRadius: "5px",
        borderBottomLeftRadius: "5px",
        borderTopRightRadius: "5px",
        borderBottomRightRadius: "5px",
        backgroundColor: "rgba(0, 0, 0, 0.4)",
    },
    mark: {
        backgroundColor: '#bfbfbf',
        height: 8,
        width: 1,
        marginTop: -3,
    },
    markActive: {
        opacity: 1,
        backgroundColor: 'currentColor',
    },
})(Slider);

有没有办法在滑块中获得一个三角形按钮？

【问题讨论】：

标签： javascript reactjs google-chrome material-ui slider

【解决方案1】：

只需添加

borderRadius: "0px",

thumb 风格 sandbox

【讨论】：