The color varies across the cell because your data array is associated with points instead of cells, try to apply the PointDataToCellData filter to obtain a fixed value per cell . Also, in the color map editor panel you have already open scroll down to “Color Discretization” enable Discretize and reduce the number of table values to something like 12 of your example.
For now, you just have to create the color map with constant color regions that match the tics yourself. There are a couple ways to do this.
The first way is to use the Color Discretization controls at the bottom of the Color Map Editor. It looks like you are already doing this, but if you set it for 8, that should match the 9 tics you have in the color bar. You may have to set a specific range to ensure that the tic spacing matches the color spacing, but it should work fine for your 0 – 40 range.
The second way is to change the colormap itself to have stepped colors. You can change Color Space to Step and then set a control point at each tic value with the color you want for the range below that tic. This gives you a lot of control, but is tough to apply color values from maps like the one you selected.
Unfortunately, both of these methods are vulnerable to the tics being changed if the color legend is moved or the view resized.