三角形按钮滑块 ReactJS/MaterialUI

Question

我正在努力在 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);

有什么办法可以解决滑块中的三角形按钮吗？

Answer 1

只需添加

borderRadius: "0px",

到thumb风格 sandbox

三角形按钮滑块 ReactJS/MaterialUI

Triangle Button Slider In ReactJS/MaterialUI

javascript

google-chrome

slider

reactjs

material-ui